Bootstrap
什么是Bootstrap
- Bootstrap是一个用于快速开发web应用程序和网站的前端框架。是基于HTML、CSS、JavaScript的。
- 是由Twitter的 Mark Otto 和 Jacob Thornton 开发的。于2011年发布。
为什么要学习使用Bootstrap??
- 移动设备优先;
- 浏览器支持(所有主流浏览器);
- 容易上手;
- 响应式设计;
下载使用Bootstrap
-
下载地址: http://getbootstrap.com/
-
使用方式:把包文件的特定位置链入HTML代码头就行了
-
其他一些效果插件于百度搜索或者官网下载,然后链入HTML代码头即可;
头部设置
-
为了确保适当的绘制和触屏缩放,需要在
<head>
之中添加 viewport 元数据标签。 -
user-scalable=no
可以禁用其缩放(zooming)功能。<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,user-scalable=no">
布局容器
-
.container类用于固定宽度并支持响应式布局的容器
-
.container-fluid类用于100%宽度,占据全部视口(viewport)的容器
<div class="container"> <div class="container-fluid"> </div> </div>
栅格系统
- Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕视口尺寸的增加,系统会自动分为最多12列。
- 栅格系统用于通过一系列的行(row)和列(column)的组合来创建页面布局,只需把内容放置盒子中即可。
栅格参数(多种设备上的数据)
超小屏幕(手机) | 小屏幕(平板) | 中等屏幕(桌面显示器) | 超大屏幕(大桌面显示器) | |
---|---|---|---|---|
栅格系统行为 | 总是水平排列 | |||
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
可偏移 | 是 | 是 | 是 | 是 |
-
在某些阈值时,某些列可能会出现比别的列高的情况时,使用**.clearfix**和响应式工具。
<div class="clearfix visible-xs-block"> </div>
列偏移
- 使用**.col-xs-offset-***类可以将列向右侧偏移。
嵌套列
- 为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的**.row** 和一系列**.col-xs-***放进已经保存的.col-sm-*元素内。
列排序
- 通过使用**.col-md-push-*** 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。
媒体查询
- 在栅格系统中,我们在less文件中使用一下媒体查询(media query)来创建关键的分界点阈值。
- 我们偶尔也会在媒体查询代码中包含
max-width
从而将 CSS 的影响限制在更小范围的屏幕大小之内。
@media (max-width:@screen-xs-max){}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
排版格式
标题
-
HTML 中的所有标题标签,
<h1>
到<h6>
均可使用。另外,还提供了.h1
到.h6
类,为的是给内联(inline)属性的文本赋予标题的样式。 -
在标题内还可以包含
<small>
标签或赋予.small
类的元素,可以用来标记副标题。<h4> 你好,Bootstrap<small>我是机器人</small> </h4>
中心内容
- 添加
.lead
类可以让段落突出显示。
<p class="lead">
</p>
内联文本元素
-
设置
<mark>
标签可以使对象有背景颜色突出。你好,我叫<mark>Bootstrap</mark>
被删除的文本
-
对于想删除的文本使用
<del>
标签。<del>这段话需要进行删除操作。</del>
无用文本
-
对于无用的文本使用
<s>
标签。<s>这段文字无用,划掉就行。</s>
插入文本
-
额外插入的文本使用
<ins>
标签。<ins>这是一段插入文本内容。</ins>
带下划线的文本
-
为文本添加下划线,使用
<u>
标签。<u>这是一段带下划线的文字。</u>
小号文本
- 使用
<small>
标签设置文本。
着重
- 使用
<strong>
标签加重文本样式。
斜体
- 使用
em
标签设置斜体。
对齐
- 使用对齐类,可以使文字重新对齐。
text-left
类、text-right
类、text-center
类、text-justify
类、text-nowrap
类(左、右、居中、左、左)
改变大小写
- 通过这几个类改变文本的大小写。
text-lowercase
类、text-uppercase
类、text-capitalize
类(小写、大写、第一个字母大写)
缩略语
-
基本缩略语
-
使用
<abbr>
元素。<abbr title="attribute">attr</abbr>
首字母缩略语
-
为缩略语添加
.initialism
类,可以让 font-size 变得稍微小些。<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
地址
-
使用
<address>
标签。<address> <strong>Wj.</strong><br> 1355 Market Street, Suite 900 <abbr title="Phone">P:</abbr> (123) 456-7890 </address>
默认样式的引用
-
blockquote
标签。<blockquote> <p>Life is love.</p> </blockquote>
多种引用样式
-
添加
<footer>
用于标明引用来源。来源的名称可以包裹进<cite>
标签中。<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>
-
通过赋予
.blockquote-reverse
类可以让引用呈现内容右对齐的效果。
无序列表
<ul>
<li></li>
</ul>
有序列表
<ol>
<li></li>
</ol>
内联列表
- 通过设置
display: inline-block;
并添加少量的内补(padding),将所有元素放置于同一行。
<ul class="list-inline">
<li></li>
</ul>
水平列表的描述
-
.dl-horizontal
可以让<dl>
内的短语及其描述排在一行。开始是像<dl>
的默认样式堆叠在一起,随着导航条逐渐展开而排列在一行。<dl class="dl-horizontal"> <dt></dt> <dd></dd> </dl>
表格
原始表格类
-
为任意
<table>
标签添加.table
类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。<table class="table"> </div>
条纹状表格
-
通过
.table-striped
类可以给<tbody>
之内的每一行增加斑马条纹样式。<table class="table table-striped"> </div>
带边框的表格
-
添加
.table-bordered
类为表格和其中的每个单元格增加边框。<table class="table table-bordered"> </div>
鼠标悬停
-
通过添加
.table-hover
类可以让<tbody>
中的每一行对鼠标悬停状态作出响应。<table class="table table-hover"> </div>
紧缩表格
-
通过添加
.table-condensed
类可以让表格更加紧凑,单元格中的内补(padding)均会减半。<table class="table table-condensed"> </div>
状态类
-
通过这些状态类可以为行或单元格设置颜色。
Class 描述 .active 鼠标悬停在行或单元格上时所设置的颜色 .success 标识成功或积极的动作 .info 标识普通的提示信息或动作 .warning 标识警告或需要用户注意 .danger 标识危险或潜在大带来负面影响的动作
响应式表格
-
将任何
.table
元素包裹在.table-responsive
元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。<div class="table-responsvie"> <table class="table"> </table> </div>
表单
基本实例
-
所有设置了
.form-control
类的input、textarea、select
元素都将默认设置宽度为100%,将label元素和前面的元素放在form-group
中可以获得最好的排列。<form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
内联表单
-
为form添加
.form-inline
类可以使其内容左对齐并且表现为inline-block级别的组件。只适用于窗口在768px宽度时(太小会被折叠)。 -
一定要添加label标签。
-
使用 class .sr-only,可以隐藏内联表单的标签。
//此页面显示效果为全部表单在同一行然后居左。 <form class="form-inline"> <div class="form-group"> <label for="exampleInputName2">Name</label> <input type="text" class="form-control" id="exampleInputName2" placeholder=""> </div> <div class="form-group"> <label for="exampleInputEmail2">Email</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder=""> </div> <button type="submit" class="btn btn-default">Send invitation</button> </form>
水平排列的表单
-
为form添加.form-horizontal类。
<form class="form-horizontal"> </form>
被支持的控件
- 与html5差不多,基本都能实现效果。
文本域
-
支持多行文本的表单控件,可根据需要改变
rows
属性。<textarea class="form-control" rows="3"></textarea>
多选和单选框
-
多选框(checkbox)用于选择列表中的一个或多个选项,而单选框(radio)用于从多个选项中只选择一个。
//正方形选择样式 <div class="checkbox"> <label> <input type="checkbox" value=""> Option one is this and that—be sure to include why it's great </label> </div> <div class="checkbox disabled"> <label> <input type="checkbox" value="" disabled> Option two is disabled </label> </div> //圆形选择样式 <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that—be sure to include why it's great </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label> </div> <div class="radio disabled"> <label> <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Option three is disabled </label> </div>
内联单选和多选框
-
通过将
.checkbox-inline
或.radio-inline
类应用到一系列的多选框(checkbox)或单选框(radio)控件上,可以使这些控件排列在一行。<label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3 </label>
下拉菜单
-
select
-
注意,很多原生选择菜单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改
border-radius
属性来改变的。<select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select>
//标记multiple属性的select控件来说,默认显示多选项 <select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select>
静态控件
- 如果需要在表单中将一行纯文本和
label
元素放置于同一行,为元素添加
.form-control-static
类即可。
水平排列的表单组的尺寸
-
通过添加
.form-group-lg
或.form-group-sm
类,为.form-horizontal
包裹的label
元素和表单控件快速设置尺寸。<form class="form-horizontal"> <div class="form-group form-group-lg"> <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label> <div class="col-sm-10"> <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input"> </div> </div> <div class="form-group form-group-sm"> <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label> <div class="col-sm-10"> <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input"> </div> </div> </form>
调整列(column)尺寸
-
用栅格系统中的列(column)包裹输入框或其任何父元素,都可以很容易设置其宽度。
<div class="row"> <div class="col-xs-2"> <input type="text" class="form-control" placeholder=".col-xs-2"> </div> <div class="col-xs-3"> <input type="text" class="form-control" placeholder=".col-xs-3"> </div> <div class="col-xs-4"> <input type="text" class="form-control" placeholder=".col-xs-4"> </div> </div>
按钮
预定义样式
- 使用下面的类可以快速创建一个带有预定义样式的按钮。
- 默认样式: btn-default 首选项:btn-primary 成功:btn-success 一般信息:btn-info 警告: btn-warning 危险:btn-danger 链接:btn-link
尺寸
-
使用
.btn-lg
、.btn-sm
或.btn-xs
就可以获得不同尺寸的按钮。<p> <button type="button" class="btn btn-dafault btn-lg">1</button> <button type="button" class="btn btn-primary btn-sm">2</button> </p>
-
通过给按钮添加
.btn-block
类可以将其拉伸至父元素100%的宽度,而且按钮也变成了块级(block)元素。 -
为
<button>
元素添加disabled
属性,使其表现出禁用状态。
辅助类
关闭按钮
-
通过使用一个象征关闭的图标,可以让模态框和警告框消失。
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
三角符号
-
通过使用三角符号可以指示某个元素具有下拉菜单的功能。
-
注意,向上弹出式菜单中的三角符号是反方向的。
<span class="caret"></span>
快速浮动
-
通过添加一个类,可以将任意元素向左或向右浮动。
!important
被用来明确 CSS 样式的优先级。 -
导航条中,使用
.navbar-left
或.navbar-right
。<div class="pull-left">...</div> <div class="pull-right">...</div> // Classes .pull-left { float: left !important; } .pull-right { float: right !important; } // Usage as mixins .element { .pull-left(); } .another-element { .pull-right(); }
内容居中
-
为任意元素设置
display: block
属性并通过margin
属性让其中的内容居中。<div class="center-block"> </div>
清除浮动
-
通过为父元素添加
.clearfix
类可以很容易地清除浮动(float
)。<div class="clearfix">...</div>
下拉菜单
- 用于显示链接列表的可切换、有上下文的菜单。
实例
-
将下拉菜单触发器和下拉菜单都包裹在
.dropdown
里。 -
.dropdown-menu
类设置下拉菜单列表。<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>
-
通过为下拉菜单的父元素设置
.dropup
类,可以让菜单向上弹出(默认是向下弹出的)。<div class="dropup"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropup <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu2"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>
对齐方式
-
默认情况下,下拉菜单会自动沿着父元素的上沿和左侧被定位为100%宽度;
-
为
.dropdown-menu
添加.dropdown-menu-right/.dropdown-menu-left
类可以让其下拉菜单右对齐或左对齐;<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel"> ... </ul>
标题
-
在任何下拉菜单中均可通过添加标题来标明一组动作。
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3"> ... <li class="dropdown-header">Dropdown header</li> ... </ul>
分割线
-
为下拉菜单添加一条分割线,用于将多个链接分组。
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider"> ... <li role="separator" class="divider"></li> ... </ul>
禁用的菜单项
-
为下拉菜单中的
<li>
元素添加.disabled
类,从而禁用相应的菜单项。<ul class="dropdown-menu" aria-labelledby="dropdownMenu4"> <li><a href="#">Regular link</a></li> <li class="disabled"><a href="#">Disabled link</a></li> <li><a href="#">Another link</a></li> </ul>
按钮组
- 通过按钮组容器把一组按钮放在同一行里。
- 为了向使用辅助技术的用户传达正确的按钮分组,需要提供一个合适的
role
属性。 - 对于按钮组合,应该是
role="group"
; - 对于toolbar(工具栏),应该是
role="toolbar"
; - 按钮组和工具栏应给定一个明确的label标签,尽管设置了正确的
role
属性,但是大多数辅助技术将不会正确的识读他们。在这里提供的实例中,我们使用aria-label
,但是,aria-labelledby
也可以使用; - 例如:aria-label=“用户名”
基本实例
-
按钮组合用
.btn-group
类设置;<div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>
按钮工具栏
-
把一组
<div class="btn-group">
组合进一个<div class="btn-toolbar">
中就可以做成更复杂的组件。<div class="btn-toolbar" role="toolbar" aria-label="..."> <div class="btn-group" role="group" aria-label="...">...</div> <div class="btn-group" role="group" aria-label="...">...</div> <div class="btn-group" role="group" aria-label="...">...</div> </div>
尺寸
-
只要给
.btn-group
加上.btn-group-*
类,就省去为按钮组中的每个按钮都赋予尺寸类了,如果包含了多个按钮组时也适用。<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div> <div class="btn-group" role="group" aria-label="...">...</div> <div class="btn-group btn-group-sm" role="group" aria-label="...">...</div> <div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
嵌套
-
想要把下拉菜单混合到一系列按钮中,只须把
.btn-group
放入另一个.btn-group
中。<div class="btn-group" role="group" aria-label=""> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <div class="btn-group" role="group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div>
垂直排列
-
让一组按钮垂直堆叠排列显示;
-
分列式按钮下拉菜单不支持这种方式;
-
添加使用
.btn-group-vertical
类<div class="btn-group-vertical" role="group" aria-label="..."> </div>
两端对齐排列的按钮组
-
让一组按钮拉长为相同的尺寸,填满父元素的宽度;
-
Internet Explorer 8 不支持在两端对齐的按钮组中绘制边框,无论是
<a>
或<button>
元素。为了照顾 IE8,把每个按钮放入另一个.btn-group
中即可。 -
**关于元素,**只须将一系列
.btn
元素包裹到.btn-group .btn-group-justified
中即可。<div class="btn-group btn-group-justified" role="group" aria-label=""> </div>
-
**关于元素,**为了将元素用于两端对齐的按钮组中,必须将每个按钮包裹进一个按钮组中
<div class="btn-group btn-group-justified" role="group" aria-label=""> <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Left</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Middle</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Right</button> </div> </div>
按钮式下拉菜单
- 把任意一个按钮放入.btn-group中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了
单按钮下拉菜单
- 点击一个按钮出现下拉菜单内容
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
默认 <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">功能</a></li>
<li><a href="#">另一个功能</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>
</div>
分割式按钮下拉菜单
-
中间设置分割线
-
分割按钮的左边是原始的功能,右边是显示下拉菜单的切换。
<div class="btn-group"> <button type="button" class="btn btn-default">默认</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">切换下拉菜单</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">功能</a></li> <li><a href="#">另一个功能</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </div>
按钮式下拉菜单的尺寸
- 使用带有各种大小按钮的下拉菜单:.btn-lg、.btn-sm 或 .btn-xs。
向上弹出式菜单
-
给父元素添加
.dropup
类即可<div class="btn-group dropup"> <button type="button" class="btn btn-default">Dropup</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <!-- Dropdown menu links --> </ul> </div>
输入框组
-
通过在文本输入框
<input>
前面、后面或是两边加上文字或按钮,可以实现对表单控件的扩展; -
为
.input-group
赋予.input-group-addon
或.input-group-btn
类,可以给.form-control
的前面或后面添加额外的元素; -
不支持
和元素; -
我们不支持在输入框的单独一侧添加多个额外元素(
.input-group-addon
或.input-group-btn
); -
我们不支持在单个输入框组中添加多个表单控件。
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> </div>
输入框组的大小设置
- 通过向 .input-group 添加相对表单大小的 class(比如 .input-group-lg、input-group-sm)来改变输入框组的大小。输入框中的内容会自动调整大小。
多选框和单选框
-
可以将多选框或单选框作为额外元素添加到输入框组中。
<div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <input type="text" class="form-control"> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div>
额外元素的按钮插件
-
当需要在输入框添加一层嵌套时,用
.input-group-btn
类 来包裹按钮元素;<div class="col-lg-6"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> <input type="text" class="form-control" placeholder="Search for..."> </div><!-- /input-group --> </div><!-- /.col-lg-6 -->
额外元素按钮式下拉菜单
- 在输入框组中添加带有下拉菜单的按钮,只需要简单地在一个 .input-group-btn class 中包裹按钮和下拉菜单即可
额外元素分裂式按钮下拉菜单
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
添加各类样式内容按钮
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
导航
- bt中的导航组件都依赖同一个类
.nav
,状态类也是共用的; - 标签页上使用导航需要依赖javascript标签页插件,另外还需添加
role
和ARIA属性; - 如果你在使用导航组件实现导航条功能,务必在
<ul>
的最外侧的逻辑父元素上添加role="navigation"
属性,或者用一个<nav>
元素包裹整个导航组件; - 不要将 role 属性添加到
<ul>
上,因为这样可以被辅助设备(残疾人用的)上被识别为一个真正的列表。
标签页
-
在class中添加
.nav-tabs
类;<ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul>
胶囊式标签页
-
添加
.nav-pills
类即可;<ul class="nav nav-pills"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul>
垂直式标签页
-
添加
.nav-stacked
类即可;<ul class="nav nav-pills nav-stacked"> ... </ul>
两端对齐的标签页
-
在大于 768px 的屏幕上,通过
.nav-justified
类可以很容易的让标签页或胶囊式标签呈现出同等宽度; -
在小屏幕上,导航链接呈现堆叠样式。
<ul class="nav nav-tabs nav-justified"> </ul> <ul class="nav nav-pills nav-justified"> </ul>
禁用的链接
-
对任何导航组件(标签页、胶囊式标签页),都可以添加
.disabled
类,从而实现链接为灰色且没有鼠标悬停效果。<ul class="nav nav-pills"> <li role="presentation" class="disabled"><a href="#">Disabled link</a></li> </ul>
带下拉菜单的标签页
-
以一个带有 class .nav 的无序列表开始;
-
添加 class .nav-tabs;
-
添加带有 .dropdown-menu class 的无序列表。
<p>带有下拉菜单的标签</p> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Windows</a></li> <li><a href="#">iOS</a></li> <li><a href="#">Google</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Java <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Swing</a></li> <li><a href="#">jMeter</a></li> <li><a href="#">EJB</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </li> <li><a href="#">PHP</a></li> </ul>
带胶囊式下拉菜单标签页
-
步骤与创建带有下拉菜单的标签相同,只是需要把 .nav-tabs class 改为 .nav-pills
<p>带有下拉菜单的胶囊</p> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Windows</a></li> <li><a href="#">iOS</a></li> <li><a href="#">Google</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Java <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Swing</a></li> <li><a href="#">jMeter</a></li> <li><a href="#">EJB</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </li> <li><a href="#">PHP</a></li> </ul>
导航栏
- 导航栏在您的应用或网站中作为导航页头的响应式基础组件;
- 导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开;
默认的导航栏
- 向
- 向上面的元素添加 role=“navigation”,有助于增加可访问性;
- 向
元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 元素。这会让文本看起来更大一号;
- 为了向导航栏添加链接,只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。
响应式导航栏
-
为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的
中; -
折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮;
-
第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么;
-
第二个是 data-target,指示要切换到哪一个元素;
-
三个带有 class .icon-bar 的 创建所谓的汉堡按钮。
<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">我的网址</a> </div> <div class="collapse navbar-collapse" id="example-navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">Windows</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> <li class="divider"></li> <li><a href="#">另一个分离的链接</a></li> </ul> </li> </ul> </div> </div> </nav>
品牌图标
-
将导航条内放置品牌标志的地方替换为
<img>
元素即可展示自己的品牌图标。<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"> <img alt="Brand" src="..."> </a> </div> </div> </nav>
导航栏中的表单
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">我的网址</a>
</div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</div>
</nav>
导航栏中的按钮
- 可以使用 class .navbar-btn 向不在 中的 元素添加按钮,按钮在导航栏上垂直居中。
- .navbar-btn 可被使用在 和 元素上;
- 不要在 .navbar-nav 内的 元素上使用 .navbar-btn,因为它不是标准的button class.
导航栏的文本
- 如果需要在导航中包含文本字符串,请使用 class .navbar-text。这通常与
标签一起使用,确保适当的前导和颜色。
组件对齐方式
-
可以使用实用工具 class .navbar-left 或 .navbar-right 向左或向右对齐导航栏中的 导航链接、表单、按钮或文本 这些组件。
<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">我的网址</a> </div> <div> <!--向左对齐--> <ul class="nav navbar-nav navbar-left"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> <li class="divider"></li> <li><a href="#">另一个分离的链接</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <button type="submit" class="btn btn-default"> 向左对齐-提交按钮 </button> </form> <p class="navbar-text navbar-left">向左对齐-文本</p> <!--向右对齐--> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> <li class="divider"></li> <li><a href="#">另一个分离的链接</a></li> </ul> </li> </ul> <form class="navbar-form navbar-right" role="search"> <button type="submit" class="btn btn-default"> 向右对齐-提交按钮 </button> </form> <p class="navbar-text navbar-right">向右对齐-文本</p> </div> </div> </nav>
导航栏位置固定
- 固定在顶部:添加
.navbar-fixed-top
类可以让导航条固定在顶部,还可包含一个.container
或.container-fluid
容器,从而让导航条居中,并在两侧添加内补(padding); - 固定在底部:添加
.navbar-fixed-bottom
类可以让导航条固定在底部,并且还可以包含一个.container
或.container-fluid
容器,从而让导航条居中,并在两侧添加内补(padding); - 静止在顶部:通过添加
.navbar-static-top
类即可创建一个与页面等宽度的导航条,它会随着页面向下滚动而消失。还可以包含一个.container
或.container-fluid
容器,用于将导航条居中对齐并在两侧添加内补(padding);不用给body
添加任何内补(padding)。
反色导航栏
- 添加
.navbar-inverse
类可以改变导航条的外观。添加.navbar-inverse
类可以改变导航条的外观。
路径导航(面包屑导航(Breadcrumbs))
-
面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式;
-
Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有 .breadcrumb class 的无序列表;
-
分隔符会通过 CSS(bootstrap.min.css)中的 class 自动被添加;
<ul class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">2013</a></li> <li class="active">十一月</li> </ul>
分页
默认分页
-
添加
.pagination
类;<nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav>
禁用和激活状态
-
使用 .disabled 来定义不可点击的链接;
-
使用 .active 来指示当前的页面。
<ul class="pagination"> <li><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> <li class="disabled"><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul>
尺寸
.pagination-lg
或.pagination-sm
类提供了额外可供选择的尺寸;
翻页
默认翻页
-
添加
.pager
类即可;<ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul>
对齐的链接
-
使用 class .previous 把链接向左对齐;
-
使用 .next 把链接向右对齐。
<ul class="pager"> <li class="previous"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul>
翻页状态
- 禁用状态:
.disabled
类;
标签
-
标签可用于计数、提示或页面上其他的标记显示;
-
使用 class .label 来显示标签。
-
如果标签数量过多,解决的办法是为每个标签都设置为
display: inline-block;
属性。<span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span>
徽章
- 主要用于突出显示新的或未读的项;
- 如需使用徽章,只需把
<span class="badge"></span>
添加到指定位置即可。
超大屏幕
-
顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin);
-
创建一个
.jumbotron
类; -
为了获得占用全部宽度且不带圆角的超大屏幕,请在所有的 .container class 外使用 .jumbotron class;
<div class="jumbotron"> <div class="container"> <h1>欢迎!</h1> <p>这是一个超大屏幕的实例。</p> <p><a class="btn btn-primary btn-lg" role="button"> 哈哈</a> </p> </div> </div>
页面标题
-
当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用;
-
在div中添加
.page-header
即可;<div class="page-header"> <h1>页面标题实例 <small>子标题</small> </h1> </div> <p>这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。</p>
缩略图
- 在图像周围添加带有 class .thumbnail 的 标签;
- 这会添加四个像素的内边距(padding)和一个灰色的边框;
- 当鼠标悬停在图像上时,会动画显示出图像的轮廓。
添加自定义内容
- 把带有 class .thumbnail 的 标签改为容器div;
- 在该容器div内,您可以添加任何您想要添加的东西。由于这是一个
,我们可以使用默认的基于 span 的命名规则来调整大小;
- 如果您想要给多个图像进行分组,请把它们放置在一个无序列表中,且每个列表项向左浮动。
警告框
-
警告框组件通过提供一些灵活的预定义消息,为常见的用户动作提供反馈消息;
-
添加
.alert
类,是必须要设置的;<div class="alert alert-success">成功!很好地完成了提交。</div> <div class="alert alert-info">信息!请注意这个信息。</div> <div class="alert alert-warning">警告!请不要提交。</div> <div class="alert alert-danger">错误!请进行一些更改。</div>
可关闭的警告框
-
为警告框添加一个可选的
.alert-dismissible
类和一个关闭按钮;<div class="alert alert-success alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button> 成功!很好地完成了提交。 </div>
警告框中的链接
-
用
.alert-link
工具类,可以为链接设置与当前警告框相符的颜色。<div class="alert alert-success"> <a href="#" class="alert-link">成功!很好地完成了提交。</a> </div>
进度条
-
添加一个带有 class .progress 的容器div;
-
接着,在上面的容器div内,添加一个带有 class .progress-bar 的空的 容器div;
-
添加一个带有百分比表示的宽度的 style 属性,例如 style=“width: 60%”; 表示进度条在 60% 的位置。
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> <span class="sr-only">40% 完成</span> </div> </div>
带提示的进度条
- 将设置了
.sr-only
类的<span>
标签从进度条组件中移除 类,从而让当前进度显示出来。
交替进度条
- 添加一个带有 class .progress 的 容器div;
- 接着,在上面的
内,添加一个带有 class .progress-bar 和 class progress-bar-* 的空的。其中,* 可以是 success、info、warning、danger;
- 添加一个带有百分比表示的宽度的 style 属性,例如 style=“60%”; 表示进度条在 60% 的位置。
条纹进度条
- 添加一个带有 class .progress 和 .progress-striped 的容器div;
- 接着,在上面的容器div内,添加一个带有 class .progress-bar 和 class progress-bar-* 的空的容器div。其中,* 可以是 success、info、warning、danger;
- 添加一个带有百分比表示的宽度的 style 属性,例如 style=“60%”; 表示进度条在 60% 的位置。
动画效果
- 为
.progress-bar-striped
添加.active
类,使其呈现出由右向左运动的动画效果。
堆叠效果
- 把多个进度条放在相同的 .progress 中即可实现堆叠。
多媒体对象
-
在容器div元素上添加
.media
类来创建一个多媒体对象; -
使用
.media-left
类让多媒体对象(图片)来实现左对齐,同样.media-right
类实现了右对齐; -
文本内容放在 class="
media-body
" 的 div 中,图片左对齐则放在 class="media-body
" 之前,图片右对齐则放在 class="media-body
" 之后; -
此外,你还可以使用
.media-heading
类来设置标题; -
一个多媒体对象内还可以包含多个多媒体对象。
<div class="media"> <div class="media-left"> <a href="#"> <img class="media-object" src="" alt=""> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> </div> </div>
列表组
- 列表组件用于以列表形式呈现复杂的和自定义的内容;
- 向元素 ul 添加 class .list-group;
- 向 li 添加 class .list-group-item。
面板(panels)
- 创建一个基本的面板,只需要向
元素添加 class .panel 和 class .panel-default 即可;
面板标题
- 使用 .panel-heading class 可以很简单地向面板添加标题容器;
- 使用带有 .panel-title class 的 h1-h6 来添加预定义样式的标题。
面板脚注
- 在面板中添加脚注,只需要把按钮或者副文本放在带有 class .panel-footer 的 容器div中即可;
带色彩语境的面板
- 使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-danger,设置带语境色彩的面板;
带表格的面板
- 为了在面板中创建一个无边框的表格,我们可以在面板中使用 class .table。
- 假设有个容器div包含 .panel-body,我们可以向表格的顶部添加额外的边框用来分隔。如果没有包含 .panel-body 的
,则组件会无中断地从面板头部移动到表格。
带列表组的面板
-
在面板盒子中添加 ul 带有list-group和 li 带有 list-group-item 即可;
<div class="panel panel-default"> <div class="panel-heading">面板标题</div> <div class="panel-body"> <p>这是一个基本的面板内容。这是一个基本的面板内容。 这是一个基本的面板内容。这是一个基本的面板内容。 这是一个基本的面板内容。这是一个基本的面板内容。 这是一个基本的面板内容。这是一个基本的面板内容。 </p> </div> <ul class="list-group"> <li class="list-group-item">1</li> <li class="list-group-item">2</li> <li class="list-group-item">3</li> <li class="list-group-item">4</li> <li class="list-group-item">5</li> </ul> </div>
Well
- Well 是一种会引起内容凹陷显示或插图效果的容器 div;
- 为了创建 Well,只需要简单地把内容放在带有 class .well 的容器div 中即可;
尺寸大小
-
您可以使用可选类 well-lg 或 well-sm 来改变 Well 的尺寸大小;
-
这两个类是与 .well 类结合使用的。这两个类会影响内边距(padding),根据使用的类,Well 会显示得更大或者更小。
<div class="well well-lg">您好,我在大的 Well 中!</div> <div class="well well-sm">您好,我在小的 Well 中!</div>
模态框(modal.js)
- 以弹出对话框的形式出现,具有最小和最实用的功能集;
- 千万不要在一个模态框上重叠另一个模态框,要想同时支持多个模态框,需要自己写额外的代码来实现;
静态实例
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
动态实例
-
使用模态窗口,您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮;
-
如果您仔细查看上面的代码,您会发现在 标签中,data-target="#myModal" 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框,然后为每个模态框创建不同的触发器。现在,很明显,您不能在同一时间加载多个模块,但您可以在页面上创建多个在不同时间进行加载;
-
.modal,用来把
的内容识别为模态框; -
.fade class。当模态框被切换时,它会引起内容淡入淡出;
-
aria-labelledby=“myModalLabel”,该属性引用模态框的标题;
-
属性 aria-hidden=“true” 用于保持模态窗口不可见,直到触发器被触发为止(比如点击在相关的按钮上);
-
class=“modal-header”,modal-header 是为模态窗口的头部定义样式的类;
-
class=“close”,close 是一个 CSS class,用于为模态窗口的关闭按钮设置样式;
-
data-dismiss=“modal”,是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口;
-
class=“modal-body”,是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的主体设置样式;
-
class=“modal-footer”,是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的底部设置样式;
-
data-toggle=“modal”,HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口;
-
模态框提供了可选尺寸,通过为
.modal-dialog
增加一个样式调整类实现; -
如果你不需要模态框弹出时的动画效果(淡入淡出效果),删掉
.fade
类即可。<h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 开始演示模态框 </button> <!-- 模态框(Modal) --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title" id="myModalLabel"> 模态框(Modal)标题 </h4> </div> <div class="modal-body"> 在这里添加一些文本 </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button> <button type="button" class="btn btn-primary"> 提交更改 </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div>
下拉菜单(dropdown.js)
- 向链接或按钮添加 data-toggle=“dropdown” 来切换下拉菜单;
- 可在标签页内也可以在标签页外。
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">我的网址</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">Windows</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
滚动监听(Scrollspy.js)
-
自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标;
-
随着您的滚动,基于滚动条的位置向导航栏添加 .active class;
-
添加监听元素,data-spy=“scroll”;
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy"> <span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">框架介绍</a> </div> <div class="collapse navbar-collapse bs-js-navbar-scrollspy"> <ul class="nav navbar-nav"> <li><a href="#ios">iOS</a></li> <li><a href="#svn">Windows</a></li> <li class="dropdown"> <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1"> <li><a href="#jmeter" tabindex="-1">jmeter</a></li> <li><a href="#ejb" tabindex="-1">ejb</a></li> <li class="divider"></li> <li><a href="#spring" tabindex="-1">spring</a></li> </ul> </li> </ul> </div> </div> </nav> <div data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height:200px;overflow:auto; position: relative;"> <h4 id="ios">iOS</h4> <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。 </p> <h4 id="svn">SVN</h4> <p>Windows公司是...... </p> <h4 id="jmeter">jMeter</h4> <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序,用于负载和性能测试。 </p> <h4 id="ejb">EJB</h4> <p>Enterprise Java Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构,部署在兼容应用程序服务器(比如 JBOSS、Web Logic 等)的 J2EE 上。 </p> <h4 id="spring">Spring</h4> <p>Spring 框架是一个开源的 Java 平台,为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。 </p> <p>Spring 框架最初是由 Rod Johnson 编写的,在 2003 年 6 月首次发布于 Apache 2.0 许可证下。 </p> </div>
标签页(tab.js)
-
添加 data-toggle=“tab” 或 data-toggle=“pill” 到锚文本链接中;
-
与前面的 “导航” 相似。
<ul id="myTab" class="nav nav-tabs"> <li class="active"> <a href="#home" data-toggle="tab"> 我的网址 </a> </li> <li><a href="#ios" data-toggle="tab">iOS</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li> <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li> </ul> </li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="home"> <p>哈哈哈</p> </div> <div class="tab-pane fade" id="ios"> <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。</p> </div> <div class="tab-pane fade" id="jmeter"> <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序,用于负载和性能测试。</p> </div> <div class="tab-pane fade" id="ejb"> <p>Enterprise Java Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构,部署在兼容应用程序服务器(比如 JBOSS、Web Logic 等)的 J2EE 上。 </p> </div> </div>
提示工具(Tooltip.js)
-
提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面;
-
如需添加一个提示工具(tooltip),只需向一个锚标签添加 data-toggle=“tooltip” 即可;
-
提示工具(Tooltip)插件不像之前所讨论的下拉菜单及其他插件那样,它不是纯 CSS 插件。如需使用该插件,您必须使用 jquery 激活它(读取 javascript)。使用下面的脚本来启用页面中的所有的提示工具(tooltip);
<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a> <script> $(function () { $("[data-toggle='tooltip']").tooltip(); }); </script>
弹出框(popover.js)
-
弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图;
-
如需添加一个弹出框(popover),只需向一个锚/按钮标签添加 data-toggle=“popover” 即可;
-
锚的 title 即为弹出框(popover)的文本。默认情况下,插件把弹出框(popover)设置在顶部;
-
弹出框(Popover)插件不像之前所讨论的下拉菜单及其他插件那样,它不是纯 CSS 插件。如需使用该插件,您必须使用 jquery 激活它(读取 javascript)。使用下面的脚本来启用页面中的所有的弹出框(popover);
<script> $(function(){ $("[data-toggle='tooltip']").popover();}); </script>
警告框(alert.js)
-
通过此插件可以为警告信息添加点击并消失的功能;
-
通过数据 API(Data API)添加可取消功能,只需要向关闭按钮添加 data-dismiss=“alert”,就会自动为警告框添加关闭功能;
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
按钮(button.js)
- 通过添加
data-loading-text="Loading..."
可以为按钮设置正在加载的状态; - 如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle=“button” 作为其属性即可;
- 创建复选框组,并通过向 btn-group 添加 data 属性 data-toggle=“buttons” 来添加复选框组的切换;
- 创建单选按钮组,并通过向 btn-group 添加 data 属性 data-toggle=“buttons” 来添加单选按钮组的切换;
折叠(Collapse.js)
-
data-toggle=“collapse” 添加到您想要展开或折叠的组件的链接上。
-
href 或 data-target 属性添加到父组件,它的值是子组件的 id。
-
data-parent 属性把折叠面板(accordion)的 id 添加到要展开或折叠的组件的链接上。
-
向元素添加 data-toggle=“collapse” 和 data-target,自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器,并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的,请添加额外的 class .in。
为了向可折叠控件添加类似折叠面板的分组管理,请添加 data 属性 data-parent="#selector"。
<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 点击我进行展开,再次点击我进行折叠。第 1 部分 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 点击我进行展开,再次点击我进行折叠。第 2 部分 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 点击我进行展开,再次点击我进行折叠。第 3 部分 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> Hello World! </div> </div> </div> </div>
轮播(carousel.js)
<div id="myCarousel" class="carousel slide">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="" alt="First slide">
</div>
<div class="item">
<img src="" alt="Second slide">
</div>
<div class="item">
<img src="" alt="Third slide">
</div>
</div>
<!-- 轮播(Carousel)导航 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
通过 data 属性:使用 data 属性可以很容易控制轮播(Carousel)的位置。
- 属性 data-slide 接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置;
- 使用 data-slide-to 来向轮播传递一个原始滑动索引,data-slide-to=“2” 将把滑块移动到一个特定的索引,索引从 0 开始计数;
- data-ride=“carousel” 属性用于标记轮播在页面加载时就开始动画播放;
- 通过 .item 内的 .carousel-caption 元素向幻灯片添加标题。只需要在该处放置任何可选的 HTML 即可,它会自动对齐并格式化。
附加导航(affix.js)
- 附加导航(Affix)插件允许指定 div 固定在页面的某个位置;
- 一个常见的例子是社交图标。它们将在某个位置开始,但当页面点击某个标记,该 div 会锁定在某个位置,不会随着页面其他部分一起滚动。
- 通过 data 属性:如需向元素添加附加导航(Affix)行为,只需要向需要监听的元素添加 data-spy=“affix” 即可。请使用偏移来定义何时切换元素的锁定和移动。
表单验证(BootstrapValidator)
-
引入插件文件
<link rel="stylesheet" type="text/css" href=".lib/css/bootstrapValidator.min.css"> <script type="text/javascript" src=".lib/js/bootstrapValidator.min.js"></script>
-
代码内容(案例)
<div class="login"> <form id="form" action="" > <h3>Login in</h3> <div class="form-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-user"></span> </span> <input type="text" class="form-control" placeholder="请输入账号" name="username"> </div> <div class="form-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span> <input type="password" class="form-control" placeholder="请输入密码" name="password"> </div> <div class="form-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span> <input type="text" id="checkCodeYZM" name="checkCodeYZM" placeholder="验证码" class="form-control"> <div class="code" class="form-control"> <canvas id="canvas" width="100" height="36"></canvas> </div> </div> <p class="radios"> <input type="radio" name="power" value="3">辅导员 <input type="radio" name="power" value="2">教师 <input type="radio" name="power" value="1">学生 </p> <button type="submit" class="btn btn-info btn-block">登录</button> <p class="lang"> <span class="lang-i"><a href="pass.html">注册新帐号</a></span> <span class="lang-m"><a href="">忘记密码</a></span> </p> </form> </div>
$(document).ready(function () { $('#form').bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { username: { type:'POST', url:'', message: '用户名验证失败', validators: { notEmpty: { message: '用户名不能为空' }, stringLength: { min: 2, max: 10, message: '用户名必须大于2位且不得超过10位字符' }, } }, password: { message: '密码验证失败', validators: { notEmpty: { message: '密码不能为空' }, stringLength: { min: 8, max: 20, message: '密码必须大于8位且不得超过20位字符' }, regexp:{ regexp:/^[a-zA-Z]{1}([a-zA-Z0-9]|[_]){5,19}$/, message:'密码必须以字母开头' } } }, checkCodeYZM: { message: '验证码验证失败', validators: { notEmpty: { message: '验证码不能为空' } } } } });
图标库(font-awesome)
-
一套绝佳的图标字体库和css框架;
-
包含了各式各样的图标,只需引入即可使用;
<link rel="stylesheet" type="text/css" href=".lib/css/font-awesome.min.css">