02-基本性组件

文章目录

一、图标字体

1.使用规则：span.class=glyphicon glyphicon-?

2.改变图标：可以使用字体样式改变图标字体。

3.alert类：简单来说就是创建一个背景色，字体也是背景色。

​比如： div.class =alert alert-danger

二、按钮组

1.按钮组：

​ div.class = .btn-group

​ 将单个按钮放入按钮组中即可成按钮组。
​div.btn-group>button.btn+button.btn

​1.大型-.btn-group-lg
​2.默认-.btn-group
​3.小型-.btn-group-sm
​4.超小-.btn-group-xs

2.按钮工具栏：

​ div.class = btn-toolbar

​组成： 将多组按钮组放入按钮工具栏中即可。
​div.btn-toolbar>div.btn-group

3.按钮组和下拉菜单嵌套

4.按钮组排列方式

1.默认水平排列

2.垂直排列：.btn-group.btn-group-vertical

3.两端对齐：.btn-group.btn-group-justified

• 按钮宽度100%，并且按钮之间均分这100%。
• 此属性关于btn为a标签时，直接使用。
• 关于btn为button标签的时候需要div.btn-group包围button

二、输入框组

1.普通式组合：

​父类-div.input-group

​基类-span.input-group-addon + [文字，子图，单选和复选]

​组合顺序不同的位置就不同

2.按钮式组合：

​父类-div.input-group

​基类-div.input-group-btn>button

三、列表组

1.用于有序或者无序标签展示

​ul.list-group>li.list-group-item
​

2.用于普通div进行链接条目

​div.list-group>a.list-group-item

3.item的背景颜色

1. list-group-item-info
2. list-group-item-success
3. list-group

3.item内的样式

1. item头-h4.list-group-item-heading
2. item体-p.list-group-item-text、

3.组合框尺寸：

1. .input-group-lg
2. 默认尺寸
3. .input-group-sm

四、分页

1.默认分页：

​容器类- ul.pagination
​–li > a

2.单上下页：

​容器类- ul.pager

​组件位置

​1.默认居中样式

​2. .previou顶左，.next顶右

3.分页状态：

​激活- .active
​禁用- .disabled

4.分页尺寸：

​大型- .pagination-lg
​默认
​小型- .pagination-sm