脚本宝典收集整理的这篇文章主要介绍了基于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>
超小屏幕(手机) | 小屏幕(平板) | 中等屏幕(桌面显示器) | 超大屏幕(大桌面显示器) | |
---|---|---|---|---|
栅格系统行为 | 总是水平排列 | |||
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
可偏移 | 是 | 是 | 是 | 是 |
在某些阈值时,某些列可能会出现比别的列高的情况时,使用**.clearfix**和响应式工具。
<div class="clearfix visible-xs-block">
</div>
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>
支持多行文本的表单控件,可根据需要改变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)包裹输入框或其任何父元素,都可以很容易设置其宽度。
<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-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"
;role="toolbar"
;role
属性,但是大多数辅助技术将不会正确的识读他们。在这里提供的实例中,我们使用 aria-label
,但是, aria-labelledby
也可以使用;按钮组合用.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>
<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>
给父元素添加.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>
可以将多选框或单选框作为额外元素添加到输入框组中。
<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 -->
<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>
.nav
,状态类也是共用的;role
和ARIA属性;<ul>
的最外侧的逻辑父元素上添加 role="navigation"
属性,或者用一个 <nav>
元素包裹整个导航组件;<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>
为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 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-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)是一种基于网站层次信息的显示方式;
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>
警告框组件通过提供一些灵活的预定义消息,为常见的用户动作提供反馈消息;
添加 .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>
标签从进度条组件中移除 类,从而让当前进度显示出来。.progress-bar-striped
添加 .active
类,使其呈现出由右向左运动的动画效果。在容器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 带有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-lg 或 well-sm 来改变 Well 的尺寸大小;
这两个类是与 .well 类结合使用的。这两个类会影响内边距(padding),根据使用的类,Well 会显示得更大或者更小。
<div class="well well-lg">您好,我在大的 Well 中!</div>
<div class="well well-sm">您好,我在小的 Well 中!</div>
<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>
<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>
自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标;
随着您的滚动,基于滚动条的位置向导航栏添加 .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>
添加 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)插件根据需求生成内容和标记,默认情况下是把提示工具(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)与工具提示(Tooltip)类似,提供了一个扩展的视图;
如需添加一个弹出框(popover),只需向一个锚/按钮标签添加 data-toggle=“popover” 即可;
锚的 title 即为弹出框(popover)的文本。默认情况下,插件把弹出框(popover)设置在顶部;
弹出框(Popover)插件不像之前所讨论的下拉菜单及其他插件那样,它不是纯 CSS 插件。如需使用该插件,您必须使用 jquery 激活它(读取 javascript)。使用下面的脚本来启用页面中的所有的弹出框(popover);
<script>
$(function(){ $("[data-toggle='tooltip']").popover();});
</script>
通过此插件可以为警告信息添加点击并消失的功能;
通过数据 API(Data API)添加可取消功能,只需要向关闭按钮添加 data-dismiss=“alert”,就会自动为警告框添加关闭功能;
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
data-loading-text="Loading..."
可以为按钮设置正在加载的状态;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>
<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)的位置。
引入插件文件
<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: '验证码不能为空'
}
}
}
}
});
一套绝佳的图标字体库和css框架;
包含了各式各样的图标,只需引入即可使用;
<link rel="stylesheet" type="text/css" href=".lib/css/font-awesome.min.css">
以上是脚本宝典为你收集整理的基于Bootstrap查找资料及总结的内容全部内容,希望文章能够帮你解决基于Bootstrap查找资料及总结的内容所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。