本篇文章学习一些bootstrap3的一些基本元素的简单样式,这些基本元素为按钮,文本,表格,表单和背景等,一样一样来。
-
按钮
btn
原始样式按钮
btn-default
默认样式按钮
btn-primary
蓝色(提交)
btn-danger
红色(表危险)
btn-success
绿色(表成功)
btn-info
青色(信息)
btn-warning
黄色(警告)
btn-link
表现为链接
btn-lg
大一点的按钮
btn-sm
小一点的按钮
btn-xs
最小的按钮
btn-block
宽屏按钮
btn active
按住的按钮
btn disable
不能按的按钮
-
表格
table
普通样式
table table-striped
斑马表格
table table-bordered
有边框的表格
table table-hover
悬浮变样式按钮
table table-condensed
紧凑表格
表格内某一行
active
被激活的一行,其样式和悬浮样式相同
info
表示信息的一行(蓝色)
success
表示成功的一样(绿色)
warning
表示警告的一行(黄色)
danger
表示危险的一行(红色)
-
图片
img-rounded
圆角
img-thumbnail
略缩图
img-circle
圆形
-
表单输入元素
form-control
被选中的输入框呈淡蓝色,对样式进行bootstrap式的美化
-
文本
text-muted
变的更淡
text-primary
呈蓝色表示强调
text-success
呈绿色表示成功
text-info
呈青色表示信息
text-warning
呈黄色表示警告
text-danger
呈红色表示危险
-
背景
bg-primary
蓝色表示强调
bg-success
绿色表示成功
bg-info
淡蓝色表示说明
bg-warning
黄色表示警告
bg-danger
红色表示危险
-
其他类
caret
下拉菜单的三角,一般用于标签
pull-right
文字浮动到右边
pull-left
文字浮动到左边
show
显示元素
hidden
隐藏元素,位置也隐藏
invisible
隐藏元素,位置仍在
-
栅格布局
col-xs-1
对应手机设备1/12
col-sm-1
对应平板设备1/12
col-md-1
对应普通显示设备1/12
col-lg-1
对应宽屏设备1/12
-
字体图标
glyphicon glyphicon-hand-right
可以应用于按钮,链接等图形文字,bootstrap包含几百种图形文字,具体可以去文档查阅。
-
下拉菜单
dropdown
定义在下拉块div
的class
里,如果是上拉菜单,这里为dropup
在这个下拉块里,需要定义一个button
下拉按钮和一个下拉列表ul
,下拉按钮内的属性:
class="btn dropdown-toggle"
中的dropdown-toggle
为js调用所需。
id=" "
指向指定id的下拉列表ul
data-toggle="dropdown"
表示切换类型为下拉
下拉块里另外一个元素ul
:
class="dropdown-menu"
表示这个ul
是下拉列表
aria-lebelledby="
下拉按钮的id
在此发挥了作用
在ul
里的列表项li
里
dropdown-header
表示列表项的标题,效果为不可选
divider
表示为列表项分割线
disabled
表示不可选中的列表选项
-
按钮组
按钮组就是多个按钮放进一个div
,该div
有一个属性class="btn-group"
,如果是btn-group-vertical
表现为垂直的按钮组,另外再加上相应的类btn-group-lg
等示按钮组的大小
多个按钮组放进一个div
,这表示一个按钮工具栏,该div
应有属性class="btn btn-toolbar"
-
输入框组
输入框组是对原生表单元素的扩展,通过输入框组可以很方便的在输入框前后加入辅助输入的要素。 标签式导航为一个 胶囊式导航为一个 要使一个导航有下拉菜单的功能,那么要给这个 因为这个导航是为了体现页面的层次性,所以这种导航是 导航栏相对于导航更加复杂,功能也更加的多 分页即页面底部的第一页第二页上一页下一页这种东西 标签用 使用Bootstrap创建略缩图的方式是在 创建一个 创建一个 在 Bootstrap的面板的作用,我的理解就是把 在相应的导航栏元素中添加类
首先把输入部分所有需要的前缀后缀输入框等按照顺序放进一个class
为input-group
的div
里,这里还可以增加相应的input-group-lg
类来设置输入框组的大小
前缀后缀为辅助输入的信息,在div
内的元素内,其
class
为input-group-addon
,输入框的class
为上文所说的form-control
复选和单选的功能可以作为输入辅助元素放在的位置,
class
同样为input-group-addon
按钮也是放在里,但是此时
class
为input-group-btn
下拉菜单则需要在
的div
里,此div
的class
为input-group-btn
导航元素
标签式导航
class
为nav nav-tabs
的无序列表ul
,其中的li
为各导航标签
增加一个nav-justified
会让导航栏与父元素等宽胶囊式导航
class
为nav nav-pills
的无序列表ul
,其中li
为各导航标签
增加一个nav-stacked
表现为垂直的胶囊式导航栏
增加一个nav-justified
会让导航栏与父元素等宽整合下拉菜单
li
增加一个class="dropdown"
,然后给原导航内的文字包裹上标签,其属性
class="dropdown-toggle" data-toggle="dropdown"
,继续为其添加一个菜单项ul
,其class
为dropdown-menu
,其中的li
元素为下拉菜单的各选项面包屑导航
class
为breadcrumb
的有序列表其他
各选项
li
中添加class
为disable
或者active
表示该选项禁用和当前选项页面
导航栏
html5中新加的特指导航元素,要应用Bootstrap的导航栏样式,在
中添加类
navbar navbar-default
以及属性role="navigation"
Bootstrap为有类似标题的导航栏提供了一个标题元素,在上面的中,使用一个
class
为navbar-header
,在这个块里,用一个把导航标题包裹起来
在上述块之后紧跟着一个块,在这个块里,包含这上面说过的导航元素,这样一个简单的Bootstrap导航栏就完成了,关于导航栏的进一步学习,我会另写一篇文章。
分页导航
分页组件被包裹在一个块内,块内是一个
class
为pagination
的无序列表
,添加相应的pagination-lg
等类可以设置分页导航的大小。
内的为各导航项,设置
的
class
为disable
可以禁用该选项
若页面只有上一页下一页两项导航,把
的class
谁知为pager
,里面包含2个分别表示上一页下一页,先后给这2个
添加类
previous
和next
可以让分页导航与父元素两端对齐
标签
包裹,
class
为label
,添加额外相应的label-primary
等类可以表现为相应的样式。
label-default
默认样式
label-primary
表示强调
label-info
表示说明信息
label-success
表示成功
label-warning
表示警告
label-danger
表示危险
徽记
徽记一般应用在未读消息之类的,比如未读信息是5,那么在未读信息旁边写一个
内容为5,
class
为badge
超大屏幕
超大屏幕使用一个
class
为jumbotron
,在这个块内,字体什么的会相对大屏幕进行样式优化
页面标题
页面标题会在标题的四周添加适当的间距,页面标题包裹在一个
class
为page-header
的块内
略缩图
外包裹一个
class
为thumbnail
的元素,这会添加四个像素的内边距和一个灰色的边框,鼠标悬浮在图像上还会有图像的轮廓
若还要添加更多的自定义内容,比如图片标题和描述等等,把上述的标签改为
警告
alert
类表示警告框,继续添加相应的alert-success
类来表示相应的警告信息,
通过添加一个alert-dismissable
类,再添加一个关闭按钮,其
class
为close
,则可以关闭这个警告信息
警告中可以添加链接,之后为
添加一个
class="alert-link"可以为链接匹配相应警告信息的颜色
进度条
class
为progress
的块,其中再创建一个块,class
为progress-bar
,设置相应的style
可以设置进度条的进度情况,要在进度条上显示即时的进度情况只需在div.progress-bar
中写入相应的文本内容即可
在div.progress-bar
中添加相应的类progress-bar-info
表现为相应颜色的进度条,添加progress-bar-striped
可以为进度条添加条纹
在有条纹的情况下,添加类active
,会使进度条有动画效果
多个div.progress-bar
被一个div.progress
包裹,表现为这些进度条的堆叠
媒体对象
pass
列表组
元素中添加类list-group
即可创建一个列表组,该
下的需添加
list-group-itemk
的class
,在列表组中添加徽章,徽章会自动定位到右边
把
改成改成
,并加上相应的链接,则可以创建一个链接列表组,在此基础上把
改成
就是一个按钮列表组了(在此要添加属性
type=button
)
在列表项的类里添加相应的list-group-item-info
类会给列表项添加相应的样式
面板
创建一个class
为panel
的panel-default
类,表现为相应信息的面板
面板内可以创建一个class
为panel-heading
的class
为panel-title
的面板标题
然后创建一个class
为panel-body
的
为面板添加注脚只需再添加一个class
为panel-footer
的
凹陷效果
创建一个
class
为well
的well-lg
对应相应的well
尺寸大小
顶(底)部导航栏不消失
navbar-fixed-top
或者navbar-fixed-botton
就可以得到这种效果