CSS组件
Posted 黑默
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS组件相关的知识，希望对你有一定的参考价值。
下拉菜单
- .dropdown:将下拉菜单触发器和下拉菜单包含在其中
- .dropdown-menu:给<ul>制定下拉菜单的样式
- .dropup:向上弹出菜单
- .dropdown-menu-left .dropdown-menu-right：菜单对齐方式
- Data-toggle属性：下拉菜单触发器，取值“dropdown”
- .divider：为下拉菜单添加分割线，用于将多个链接分组(增加一个空li，并加类)
- .disabled:禁用的菜单选项。
-
<div class="container dropdown" style="margin-bottom: 50px"> // 父元素用.dropdown的类
<button type="button" class="btn btn-warning" data-toggle="dropdown">字体
-
<span class="caret"></span></button> //给按钮添加触发器，取值“dropdown”,字体后面添加三角符号
-
<ul class="dropdown-menu"> // 使触发器和Ul相关联，并给它制定样式。
<li><a href="#">宋体</a></li>
<li><a href="#">黑体</a></li>
<li><a href="#">楷体</a></li>
</ul>
</div>
-
按钮组
- .btn-group：给父元素用的。将按钮包住。不加按钮 为分开，加了为合并。
- .btn-toolbar：将多个按钮组包住，再建个大DIV 加类样式。
- 按钮尺寸：.btn-group-lg (sm xs);
- .btn-group-vertical:垂直排列的按钮组。
-
-
输入框组
- .input-group:只能用于文本框<input>,不能用于<select><textarea>
- .input-group-addon:在input标记前后添加，用在<span标记内>
- Input-group把input和input-group-addon包围
- .input-group-lg和.input-group-sm控制输入框组的尺寸
标签页（选项卡）
- .nav:标签页 的基类
- .nav-tabs：标签页类样式
- .active:标签页状态类（当前样式）
- .nav-pills 胶囊式标签页
- .nav-stacked 胶囊式标签页堆放排列（垂直排列）
注意 .nav-tabs 类依赖 .nav 基类。
路径导航
- .breadcrumb ：赋给<ol>或者<ul>加的类
- .active 给当前栏目，不加链接
缩略图
- .thumbnail ：赋给<a>元素，实现缩略图样式
- .caption 实现缩略图标题及描述
分页
- .pagination赋给<ul>元素可以实现分页效果
- «；上一页 » 下一页
- .disabled 禁用状态
- .active 激活状态 给<li>加
- .pagination-lg :分页尺寸大
- .pagination-sm ：分页尺寸小
- .page 翻页效果
导航栏
用于nav标记的类
- .navbar :导航栏的基类，用于<nav>元素
- .navbar-default:导航栏默认样式，用于<nav>元素
- .container:<nav>的子元素，导航栏内容放入其中。
- .navbar-header:导航栏头部样式
- .navbar-barand:设置品牌图标样式
- .collapse：折叠导航栏样式的基类（用于链接DIV）
- .navbar-collapse:折叠导航栏样式(用于连接DIV)
- .nav 导航栏的链接基类 （用于UL）
- .navbar-nav 导航栏的链接样式（用于UL）
- .navbar-form:导航栏表单，使表单元素排在同一行
- .navbar-left(right):组件排列。导航链接，表单，按钮或文本对齐
- .navar-btn:对于不在<form>中的<button>元素，实现垂直对齐
- .navbar-text:对于导航栏的普通文本有了行距和颜色，通常用于<p>标记
- .navbar-fixed-top:导航栏固定在顶部，用于<nav>元素，需要为<body>设置
- Padding-top:70px
- .navbar-fixed-bottom:导航栏固定在底部，用于<nav>元素，需要为<body>设置
- Padding-top:70px
- .navbar-static-top:导航栏静止在顶部，用于<nav>元素。会随着滚动条移动而消失
- .navbar-inverse:可以是实现反色导航栏，用于<nav>元素
-
思路:
1，给nav加类样式（基类，导航栏默认样式，顶端固定）用（1，2，14，19）
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
2，导航栏内容放入DIV中，所用类样式：container 用（3）
<div class="container">
3，写导航栏的头部样式并加入品牌LOGO。用（4，5）
<div class="navbar-header">
<a class="navbar-brand" href="#">Book</a>
<p class="navbar-text">欢迎光临!</p>
</div>
4，加导航条链接，用折叠导航样式基及基类（）
<div class="collapse navbar-collapse"> //（6，7）
<ul class="nav navbar-nav navbar-left">//（8，9）
<li class="active"><a href="#">看电影</a></li>
<li><a href="#">看小说</a></li>
<li><a href="#">看图片</a></li>
<li><a href="#">听音乐</a></li>
<li><a href="#">玩游戏</a></li>
</ul>
5，引入搜索框，给form加类样式排成一列 并对齐（10，11）
加入表单组样式
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" placeholder="Search" class="form-conrol">
</div>
<button type="button" class="btn btn-danger"> Search</button>
</form>
-
以上是关于CSS组件的主要内容，如果未能解决你的问题，请参考以下文章