Bootstrap3的简单元素学习

本篇文章学习一些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 定义在下拉块divclass里,如果是上拉菜单,这里为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"


  • 输入框组

输入框组是对原生表单元素的扩展,通过输入框组可以很方便的在输入框前后加入辅助输入的要素。
首先把输入部分所有需要的前缀后缀输入框等按照顺序放进一个classinput-groupdiv里,这里还可以增加相应的input-group-lg类来设置输入框组的大小
前缀后缀为辅助输入的信息,在div内的元素内,其classinput-group-addon,输入框的class为上文所说的form-control
复选和单选的功能可以作为输入辅助元素放在的位置,class同样为input-group-addon
按钮也是放在里,但是此时classinput-group-btn
下拉菜单则需要在

里增加一个包裹,下拉菜单的div里,此divclassinput-group-btn


  • 导航元素
标签式导航

标签式导航为一个classnav nav-tabs的无序列表ul,其中的li为各导航标签
增加一个nav-justified会让导航栏与父元素等宽

胶囊式导航

胶囊式导航为一个classnav nav-pills的无序列表ul,其中li为各导航标签
增加一个nav-stacked表现为垂直的胶囊式导航栏
增加一个nav-justified会让导航栏与父元素等宽

整合下拉菜单

要使一个导航有下拉菜单的功能,那么要给这个li增加一个class="dropdown",然后给原导航内的文字包裹上标签,其属性class="dropdown-toggle" data-toggle="dropdown",继续为其添加一个菜单项ul,其classdropdown-menu,其中的li元素为下拉菜单的各选项

面包屑导航

因为这个导航是为了体现页面的层次性,所以这种导航是classbreadcrumb的有序列表

    其他

    各选项li中添加classdisable或者active表示该选项禁用和当前选项页面

    • 导航栏

    导航栏相对于导航更加复杂,功能也更加的多
    html5中新加的

你可能感兴趣的:(Bootstrap3的简单元素学习)