Bootstrap3的简单元素学习

2016-09-26  本文已影响136人  elkelk

本篇文章学习一些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 下拉菜单的三角，一般用于<span>标签
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>" 下拉按钮的id在此发挥了作用
在ul里的列表项li里
dropdown-header 表示列表项的标题，效果为不可选
divider 表示为列表项分割线
disabled 表示不可选中的列表选项

按钮组就是多个按钮放进一个div，该div有一个属性class="btn-group"，如果是btn-group-vertical表现为垂直的按钮组，另外再加上相应的类btn-group-lg等示按钮组的大小
多个按钮组放进一个div，这表示一个按钮工具栏，该div应有属性class="btn btn-toolbar"

输入框组是对原生表单元素的扩展，通过输入框组可以很方便的在输入框前后加入辅助输入的要素。
首先把输入部分所有需要的前缀后缀输入框等按照顺序放进一个class为input-group的div里,这里还可以增加相应的input-group-lg类来设置输入框组的大小
前缀后缀为辅助输入的信息，在div内的<span>元素内，其class为input-group-addon，输入框的class为上文所说的form-control
复选和单选的功能可以作为输入辅助元素放在<span>的位置，class同样为input-group-addon
按钮也是放在<span>里，但是此时class为input-group-btn
下拉菜单则需要在<input-group>的<div>里增加一个包裹，下拉菜单的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"，然后给原导航内的文字包裹上标签<a>，其属性class="dropdown-toggle" data-toggle="dropdown"，继续为其添加一个菜单项ul，其class为dropdown-menu，其中的li元素为下拉菜单的各选项

面包屑导航

因为这个导航是为了体现页面的层次性，所以这种导航是class为breadcrumb的有序列表<ol>

其他

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

导航栏相对于导航更加复杂，功能也更加的多
html5中新加的<nav>特指导航元素，要应用Bootstrap的导航栏样式，在<nav>中添加类navbar navbar-default以及属性role="navigation"
Bootstrap为有类似标题的导航栏提供了一个标题元素，在上面的<nav>中，使用一个<div>，class为navbar-header，在这个块里，用一个<a class="navbar-brand">把导航标题包裹起来
在上述块之后紧跟着一个块，在这个块里，包含这上面说过的导航元素，这样一个简单的Bootstrap导航栏就完成了，关于导航栏的进一步学习，我会另写一篇文章。

分页即页面底部的第一页第二页上一页下一页这种东西
分页组件被包裹在一个<nav>块内，块内是一个class为pagination的无序列表<ul>，添加相应的pagination-lg等类可以设置分页导航的大小。<ul>内的<li>为各导航项，设置<li>的class为disable可以禁用该选项
若页面只有上一页下一页两项导航，把<ul>的class谁知为pager，里面包含2个<li>分别表示上一页下一页，先后给这2个<li>添加类previous和next可以让分页导航与父元素两端对齐

标签用<label>包裹，class为label，添加额外相应的label-primary等类可以表现为相应的样式。
label-default 默认样式
label-primary 表示强调
label-info 表示说明信息
label-success 表示成功
label-warning 表示警告
label-danger 表示危险

徽记一般应用在未读消息之类的，比如未读信息是5，那么在未读信息旁边写一个<span>内容为5，class为badge

超大屏幕使用一个class为jumbotron，在这个块内，字体什么的会相对大屏幕进行样式优化

页面标题会在标题的四周添加适当的间距，页面标题包裹在一个class为page-header的块内

使用Bootstrap创建略缩图的方式是在<img>外包裹一个class为thumbnail的<a>元素，这会添加四个像素的内边距和一个灰色的边框，鼠标悬浮在图像上还会有图像的轮廓
若还要添加更多的自定义内容，比如图片标题和描述等等，把上述的<a>标签改为<div>标签，然后在该块内可以添加自定义的图片描述内容

创建一个<div>，为其添加alert类表示警告框，继续添加相应的alert-success类来表示相应的警告信息，
通过添加一个alert-dismissable类，再添加一个关闭按钮<button>，其class为close，则可以关闭这个警告信息
警告中可以添加链接<a>，之后为<a>添加一个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

在<ul>元素中添加类list-group即可创建一个列表组，该<ul>下的<li>需添加list-group-itemk的class，在列表组中添加徽章，徽章会自动定位到右边
把<ul>改成<div>，<li>改成<a>，并加上相应的链接，则可以创建一个链接列表组，在此基础上把<a>改成<button>就是一个按钮列表组了（在此要添加属性type=button）
在列表项的类里添加相应的list-group-item-info类会给列表项添加相应的样式

Bootstrap的面板的作用，我的理解就是把<div>的作用给显式的表现出来了
创建一个class为panel的<div>即创建了一个面板，为其添加相应的panel-default类，表现为相应信息的面板
面板内可以创建一个class为panel-heading的<div>，作用为面板头部容器，在这里可以创建class为panel-title的面板标题<h1-h6>
然后创建一个class为panel-body的<div>表示面板的内容
为面板添加注脚只需再添加一个class为panel-footer的<div>往里写注脚内容即可

创建一个class为well的<div>，这个块就会有一种凹陷效果，继续添加well-lg对应相应的well尺寸大小

在相应的导航栏元素中添加类navbar-fixed-top或者navbar-fixed-botton就可以得到这种效果

上一篇 下一篇

猜你喜欢

热点阅读