强调相关的类
.text-muted:提示,使用浅灰色(#999)
.text-primary:主要,使用蓝色(#428bca)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442)
文本对齐风格
.text-left:左对齐
.text-center:居中对齐
.text-right:右对齐
.text-justify:两端对齐
列表–去点列表
.list-unstyled
列表–内联列表(把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显
示。)
.list-inline
列表–水平定义列表(只有屏幕大于768px的时候,添加类名“.dl-horizontal”才具有
水平定义列表效果。)
.dl-horizontal
代码(一)
三种代码风格:
1、使用<code></code>来显示单行内联代码,一般是针对于单个单词或单个句子的代码
2、使用<pre></pre>来显示多行块代码,一般是针对于多行代码(也就是成块的代码)
3、使用<kbd></kbd>来显示用户输入代码,一般是表示用户要通过键盘输入的内容
代码(二)
“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,
就会在Y轴出现滚动条。
.pre-scrollable
表格
.table:基础表格
.table-striped:斑马线表格
.table-bordered:带边框的表格
.table-hover:鼠标悬停高亮的表格
.table-condensed:紧凑型表格
.table-responsive:响应式表格
表格–表格行的类(注意要实现悬浮状态,需要在<table>标签上加入table-hover类)
.active 表示当前活动的信息
.success 表示成功或者正确的行为
.info 表示中立的信息或行为
.warning 表示警告,需要特别注意
.danger 表示危险或者可能是错误的行为
单行文本框
<input type=”email” class=”form-control” placeholder=”Enter email”>
表单控件(下拉选择框select)(多行选择设置multiple属性的值为multiple)
<select multiple class=”form-control”>
表单控件(文本域textarea)
“form-control”样式的表单控件宽度为100%或auto,(高度)rows=“值”。
表单控件(复选框checkbox和单选择按钮radio)对齐问题都使用下面一对标签包起来
<label></label>
表单控件(复选框和单选按钮水平排列)
1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”
表单控件大小
1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大
表单控件状态(焦点状态)
.form-control:focus
表单控件状态(禁用状态)
相应的表单控件上添加属性“disabled”。
表单控件状态(验证状态)
1、.has-warning:警告状态(黄色)
2、.has-error:错误状态(红色)
3、.has-success:成功状态(绿色)
对号(√)has-success has-feedback
叉号(×)has-error has-feedback
警告 has-warning has-feedback
表单提示信息
“help-block”样式,将提示信息以块状显示,并且显示在控件底部。
“help-inline”。一般让提示信息显示在控件的后面,也就是同一水平显示。
按钮class属性
默认按钮.btn-default
主要按钮.btn-primary
成功按钮.btn-success
信息按钮.btn-info
警告按钮.btn-warning
危险按钮.btn-danger
按钮大写
块状按钮
在原按钮类名上添加“.btn-block”类名
按钮状态——活动状态
按钮的状态效果主要分为两种:活动状态和禁用状态。
活动状态主要包括按钮的悬浮状态(:hover),点击状态(:active)和焦点状态(:focus)几种。
注意:<button>元素是通过“:active”伪类实现,而对于<a>这样的标签元素则是通过添加类名“.active”来实现。
禁用按钮有两种实现方式:
方法1:在标签中添加disabled属性
方法2:在元素标签中添加类名“disabled”
图像
使用方法非常简单,只需要在<img>标签上添加对应的类名
1、img-responsive:响应式图片,主要针对于响应式设计
2、img-rounded:圆角图片 注意对于IE8以及其以下版本不支持
3、img-circle:圆形图片
4、img-thumbnail:缩略图片
图标(一)
Bootstrap框架的网格系统工作原理
/*定义每个列组合的宽度(使用的百分比)*/
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-1 {
width: 8.33333333%;
}
下拉菜单(基本用法)
使用方法:
在使用Bootstrap框架中的下拉菜单组件时,其结构运用的正确与否非常的重要,如果结构和类名未使用正确,直接影响组件是否能正常运用。我们来简单的看看:
1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素,示例中为:
<div class=”dropdown”></div>
2、使用了一个<button>按钮做为父菜单,并且定义类名“dropdown-toggle”和自定义“data-toggle”属性,且值必须和最外容器类名一致,此示例为:
data-toggle=”dropdown”
3、下拉菜单项使用一个ul列表,并且定义一个类名为“dropdown-menu”,此示例为:
<ul class=”dropdown-menu“>
下拉菜单(下拉分隔线)
组与组之间可以通过添加一个空的<li>,并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能。
下拉菜单(菜单标题)
class=”dropdown-header”
下拉菜单(对齐方式)
实现右对齐方法:
Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名,如下所示:
<div class=”dropdown”> <button class=”btn btn-default dropdown-toggle” type=”button” id=”dropdownMenu1″ data-toggle=”dropdown”> 下拉菜单 <span class=”caret”></span> </button> <ul class=”dropdown-menu pull-right” role=”menu” aria-labelledby=”dropdownMenu1″> … </ul></div>
同时一定要为.dropdown添加float:leftcss样式。
.dropdown{ float: left;}
下拉菜单与父容器左边对齐:
与此同时,还有一个类名刚好与“dropdown-menu-right”相反的类名“dropdown-menu-left”,其效果就是让下拉菜单与父容器左边对齐,其实就是默认效果。
下拉菜单(菜单项状态)
下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)和焦点状态(:focus):
下拉菜单项除了上面两种状态,还有当前状态(.active)和禁用状态(.disabled)。这两种状态使用方法只需要在对应的菜单项上添加对应的类名:
<div class=”dropdown”> <button class=”btn btn-default dropdown-toggle” type=”button” id=”dropdownMenu1″ data-toggle=”dropdown”> 下拉菜单 <span class=”caret”></span> </button> <ul class=”dropdown-menu” role=”menu” aria-labelledby=”dropdownMenu1″> <li role=”presentation” class=”active”><a role=”menuitem” tabindex=”-1″ href=”#”>下拉菜单项</a></li> …. <li role=”presentation” class=”disabled”><a role=”menuitem” tabindex=”-1″ href=”#”>下拉菜单项</a></li> </ul></div>
运行效果如下:
按钮(按钮组)
<div class=”btn-group”>
<button type=”button” class=”btn btn-default”><span class=”glyphicon glyphicon-step-backward”></span></button>
<button type=”button” class=”btn btn-default”><span class=”glyphicon glyphicon-fast-backward”></span></button>
<button type=”button” class=”btn btn-default”><span class=”glyphicon glyphicon-backward”></span></button>
<button type=”button” class=”btn btn-default”><span class=”glyphicon glyphicon-play”></span></button>
<button type=”button” class=”btn btn-default”><span class=”glyphicon glyphicon-pause”></span></button>
<button type=”button” class=”btn btn-default”><span class=”glyphicon glyphicon-stop”></span></button>
<button type=”button” class=”btn btn-default”><span class=”glyphicon glyphicon-forward “></span></button>
<button type=”button” class=”btn btn-default”><span class=”glyphicon glyphicon-fast-forward”></span></button>
<button type=”button” class=”btn btn-default”><span class=”glyphicon glyphicon-step-forward”></span></button>
</div>
按钮(按钮工具栏)
制作方法,你只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中,如下所示:
<div class=”btn-toolbar”> <div class=”btn-group”> … </div> <div class=”btn-group”> … </div> <div class=”btn-group”> … </div> <div class=”btn-group”> … </div></div>
按钮组大小设置
☑ .btn-group-lg:大按钮组
☑ .btn-group-sm:小按钮组
☑ .btn-group-xs:超小按钮组
只需要在“.btn-group”类名上追加对应的类名,就可以得到不同大小的按钮组。如下所示:
<div class=”btn-toolbar”> <div class=”btn-group btn-group-lg“> … </div> <div class=”btn-group”> … </div> <div class=”btn-group btn-group-sm“> … </div> <div class=”btn-group btn-group-xs“> … </div></div>
运行效果如下所示:
按钮(嵌套分组)水平
使用的时候,只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”,并且和普通的按钮放在同一级。如下所示:
<div class=”btn-group”><button class=”btnbtn-default” type=”button”>首页</button><button class=”btnbtn-default” type=”button”>产品展示</button><button class=”btnbtn-default” type=”button”>案例分析</button><button class=”btnbtn-default” type=”button”>联系我们</button><div class=”btn-group”> <button class=”btnbtn-defaultdropdown-toggle” data-toggle=”dropdown” type=”button”>关于我们<span class=”caret”></span></button> <ul class=”dropdown-menu“> <li><a href=”##”>公司简介</a></li> <li><a href=”##”>企业文化</a></li> <li><a href=”##”>组织结构</a></li> <li><a href=”##”>客服服务</a></li> </ul></div></div>