Bootstarp

引入bootstarp:（包含文件bootstarp和jq）：注意：min.js先引入

或者：

一.栅格

1.系统在多种屏幕设备上的工作

在大于等于设定的屏幕大小时，平铺；在小于设定的屏幕大小时堆叠

1.超小屏幕设备手机 <768px col-xs- 2.小屏设备平板 >=768px -col-sm-

3.中等屏幕设备桌面 >=992px col-md- 4.大屏幕设备桌面 >=1200px col-lg-

2.一行分为12列，超过12溢出在下一行

例:：<div class="row">

</div>

3.同时适应多屏幕设备:

例：<div class="row">

</div>

4.解决某些列过高问题：加入

5.列偏移：

<div class="col-xs-6 col-xs-offset-4" >11111111</div> 向右偏移

6.列嵌套：

</div>

7.列排序：

<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> 左边空3个单元

<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> 右边空9个单元

</div>

二.文本

1.p标签

1.标题标签h1-h6,以及副标题标签<small></small>

2.文本对齐:

<p class="text-left">Left aligned text.</p>

<p class="text-center">Center aligned text.</p>

<p class="text-right">Right aligned text.</p>

3.强调颜色;

<p class="text-muted">111111</p> 无色

<p class="text-primary">22222</p> 天蓝色

<p class="text-success">33333</p> 绿色

<p class="text-info">44444</p> 深蓝色

<p class="text-warning">55555</p> 黄色

<p class="text-danger">66666</p> 红色

<p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>

<p class="text-white">白色文本（白色背景上看不清楚）。</p>

dark深灰色

2.span标签

<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>

3.缩略语、引用

1.缩略语：把长句缩略成短句，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上

2.引用：例：名人名言

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

<small>Someone famous in <cite title="Source Title">Source Title</cite></small>

</blockquote>

4.列表

1.无样式列表：<ul class="list-unstyled"> <li>22222222222222222</li> </ul>

2.内联列表：将所有内容放在一列：<ul class="list-inline"> <li>111111 </li> </ul>

3.水平排列：<dl class="dl-horizontal"> <dt>1111</dt> <dd>1111111</dd></dl>

7.块级帮助文本：<span class="help-block">自己独占一行或多行的块级帮助文本。</span>

8.静态控件

将一行纯文本放置于label的同一行，为<p>元素添加.form-control-static

<label class="col-sm-2 control-label">Email</label>

<p class="form-control-static">email@example.com</p>

</div>

5.徽章

<a href="#">Inbox <span class="badge">42</span></a>

对齐方式：<a href="#"> <span class="badge pull-right">42</span> </a>

结合导航：

Home

</a>

</li>

</ul>

6.缩略图

1.图片缩略

</a>

</div>

...</div>

2.栅格系统的图像、视频、文本

<h3>Thumbnail label</h3>

<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

</div>

7.警告框

1.普通警告框

<div class="well well-lg">111</div> well well-lg修饰内补丁，即内边距

2.可以关闭的警告框

<strong>Warning!</strong> Best check yo self, you're not looking too good.

</div>

3.带链接的警告框

</div>

</div>

</div>

</div>

8.进度条

1. 进度条

<span class="sr-only">40% Complete (success)</span>

</div></div>

<span class="sr-only">20% Complete</span>

</div></div>

<span class="sr-only">60% Complete (warning)</span>

</div></div>

<span class="sr-only">80% Complete</span>

</div></div>

颜色：不写默认蓝色，progress-bar-success绿色，*-info青，*-warning深黄，*-danger红色

进度效果：默认无

2. progress-striped 条纹

<span class="sr-only">40% Complete (success)</span>

</div></div>

3. progress-striped active 运动条纹

<span class="sr-only">45% Complete</span>

</div></div>

4.堆叠效果

<span class="sr-only">35% Complete (success)</span>

</div>

<span class="sr-only">20% Complete (warning)</span>

</div>

<span class="sr-only">10% Complete (danger)</span>

</div></div>

9.媒体列表

</a>

<h4 class="media-heading">Media heading</h4>

12345

</div>

10.列表组

a).基本案例

<li class="list-group-item">Cras justo odio</li>

<li class="list-group-item">Dapibus ac facilisis in</li>

<li class="list-group-item">Morbi leo risus</li>

<li class="list-group-item">Porta ac consectetur ac</li>

<li class="list-group-item">Vestibulum at eros</li>

</ul>

b).加入徽章

Cras justo odio

</li>

</ul>

c).链接条目

Cras justo odio

</a>

<a href="#" class="list-group-item">Dapibus ac facilisis in</a>

<a href="#" class="list-group-item">Morbi leo risus</a>

<a href="#" class="list-group-item">Porta ac consectetur ac</a>

<a href="#" class="list-group-item">Vestibulum at eros</a>

</div>

d).定制内容

<h4 class="list-group-item-heading">List group item heading</h4>

</a>

</div>

11.面板

1.普通面板

2.栏目+表格

<div class="panel-heading">Panel heading</div>

...

</table></div>

3.栏目+文章+表格

<div class="panel-heading">Panel heading</div>

</div>

</table>

</div>

4. 带列表组的面板

<div class="panel-heading">Panel heading</div>

</div>

<li class="list-group-item">Cras justo odio</li>

<li class="list-group-item">Dapibus ac facilisis in</li>

<li class="list-group-item">Morbi leo risus</li>

<li class="list-group-item">Porta ac consectetur ac</li>

<li class="list-group-item">Vestibulum at eros</li>

</ul></div>

12.超大屏幕

宽度100%显示

<h1>欢迎登陆页面！</h1>

<p>这是一个超大屏幕（Jumbotron）的实例。</p>

学习更多</a>

</p>

</div>

13.折叠内容

简单：

<button type="button" class="btn btn-primary" data-toggle="collapse"

data-target="#demo">

简单的可折叠组件

</button>

Nihil anim keffiyeh helvetica, craft beer labore wes anderson

cred nesciunt sapiente ea proident. Ad vegan excepteur butcher

vice lomo.

</div>

标题一

</a>

</h4>

</div>

内容一 ...

</div>

标题二

</a>

</h4>

</div>

内容二 ...

</div>

标题三

</a>

</h4>

</div>

内容三 ...

</div>

三.表格

1.基本案例：每两行中间带一条细线

</table>

2.条纹状表格：隔行换色，单数行灰色，偶数行无色，两行之间有细线

</table>

3.带边框的表格：

</table>

4.鼠标悬停：悬停后灰色

</table>

5.紧缩表格：表格更小，更紧凑

</table>

6.状态class

.active鼠标悬停的颜色，灰色 .success标识成功或积极的动作，绿色

.warning标识警告或需要注意，黄色 .danger标识危险或潜在的带来负面影响的动作，红色

例如：行上加：<tr class="success"><td>222</td></tr>

列上加：<td class="danger">...</td>

7.响应式表格：

在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失

四.表单

1. 基本案例:

<label for="exampleInputEmail1">Email address</label>

</div>

<label for="exampleInputPassword1">Password</label>

</div>

<label for="exampleInputFile">File input</label>

<p class="help-block">Example block-level help text here.</p>

</div>

<label>

<input type="checkbox"> Check me out

</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

2.内联表单

表单左对齐显示，宽口小于768px时,表单折叠，注意：一定要为每个输入要空间laber，并加class=”sr-only”

<label class="sr-only" for="exampleInputEmail2">Email address</label>

</div>

<label class="sr-only" for="exampleInputPassword2">Password</label>

</div>

<label> <input type="checkbox"> Remember me </label>

</div>

</form>

3.水平排列的表单

<label for="inputEmail3" class="col-sm-2 control-label">Email</label>

</div>

<label for="inputPassword3" class="col-sm-2 control-label">Password</label>

</div>

<label>

<input type="checkbox"> Remember me

</label>

</div>

</div>

</form>

4.表单控件

默认宽度100%，获取焦点有蓝色边框。大部分表单控件、文本输入域控件。包括HTML5支持的所有类型：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。

例：<input type="color" class="form-control" placeholder="Text input">

5.文本域

row设置行高：<textarea class="form-control" rows="3"></textarea>

6.checkbox和radio

默认堆叠

例：<div class="checkbox">

<label> <input type="checkbox" value=""> Option </label>

</div>

<label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Option </label>

</div>

<label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option</label>

</div>

一行显示：.checkbox-inline

例：<label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label>

7.Select

单选下拉：<select class="form-control">

</select>

多选下拉：<select multiple class="form-control">

</select>

下拉按钮：颜色default、primary、success、info、warning、danger

Action <span class="caret"></span> </button>

<li><a href="#">Action</a></li>

<li><a href="#">Something else here</a></li>

<li><a href="#">Separated link</a></li>

</ul>

</div>

上弹菜单：大小：btn-xs btn-sm btn-md btn-lg

<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">Dropup

</button>

<li><a href="#">Action</a></li>

<li><a href="#">Separated link</a></li>

</ul>

</div>

分裂式下拉菜单

<button type="button" class="btn btn-danger ">Action</button>

</button>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li><a href="#">Separated link</a></li>

</ul>

</div>

禁用下拉按钮： <div class="btn-group">

Dropdown

</button>

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>

<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>

</ul>

</div>

8.禁用文本框

9.表单校验

<label class="control-label" for="inputSuccess">Input with success</label>

<input type="text" class="form-control" id="inputSuccess"> //绿色

</div>

<label class="control-label" for="inputWarning">Input with warning</label>

<input type="text" class="form-control" id="inputWarning"> //棕色

</div>

<label class="control-label" for="inputError">Input with error</label>

<input type="text" class="form-control" id="inputError"> //红色

</div>

10.控件尺寸

通过.input-lg之类的class可以为控件设置高度，通过.col-lg-*之类的class可以为控件设置宽度。

</div>

五.按钮

1.按钮颜色

<button type="button" class="btn btn-default">Default</button> //默认灰色按钮

<button type="button" class="btn btn-primary">Primary</button> //蓝色

<button type="button" class="btn btn-success">Success</button> //绿色

<button type="button" class="btn btn-info">Info</button> //蓝色

<button type="button" class="btn btn-warning">Warning</button> //深黄

<button type="button" class="btn btn-danger">Danger</button> //红色

<button type="button" class="btn btn-link">Link</button> //按钮转链接

2.按钮尺寸

btn-lg大 btn-md中等(默认) btn-sm小 btn-xs超小

例：<button type="button" class="btn btn-primary btn-lg">Large button</button>

3.加载按钮

Loading state</button>

4.按钮充满父元素

例：<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>

5.活动状态

按钮点击被压下，边框颜色深，内置阴影

<button type="button" class="btn btn-default btn-lg active">Button</button>

6.链接转按钮

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>

7.禁用链接

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

8.禁用

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">button</button>

9.单选按钮

<input type="radio" name="options" id="option1"> 1

</label>

<input type="radio" name="options" id="option2"> 2

</label>

<input type="radio" name="options" id="option3"> 3

</label>

10.按钮组

a).<div class="btn-group">

<button type="button" class="btn btn-default">Middle</button>

<button type="button" class="btn btn-default">Right</button>

</div>

b).并排按钮组：

<button type="button" class="btn btn-default">Middle</button>

<button type="button" class="btn btn-default">Right</button>

</div>

<button type="button" class="btn btn-default">Middle</button>

<button type="button" class="btn btn-default">Right</button>

</div>

c).按钮组尺寸

d).按钮组下拉框组合：

Dropdown

</button>

<li><a href="#">Dropdown link</a></li>

</ul>

</div>

竖直排列：<div class="btn-group-vertical"> 最外层div

两端对齐，100%显示： <div class="btn-group-justified"> 最外层div

六.图片

1.<img src="..." alt="..." class="img-rounded"> 圆角矩形

<img src="..." alt="..." class="img-circle"> 圆

<img src="..." alt="..." class="img-thumbnail"> 带内空白的矩形

2.响应式图片：<img src="..." class="img-responsive" alt="Responsive image">

3.关闭按钮：<button type="button" class="close" aria-hidden="true">×</button>

4.快速浮动：<div class="pull-left">...</div>左浮动 <div class="pull-right">...</div>右浮动

注：导航条中用.navbar-left 或 .navbar-right。

5.清除浮动：<div class="clearfix">...</div>

6.显示、隐藏：<div class="show">111</div> <div class="hidden">222</div>

7.块级元素在不同屏幕上的显示(其它尺寸的屏幕隐藏)

显示：.visible-xs <768px .visible-sm 768px-992px

.visible-md 992px-1200px .visible-lg >=1200px

隐藏：.hidden-xs .hidden-sm .hidden-md .hidden-lg

七.图标

Bootstrap 提供了 glyphicons-halflings.png 和 glyphicons-halflings-white.png 两个图标文件，它们的效果完全相同。不同的是，前者是白底黑色图标，后者是黑底白色图标。

每个图标都需要依附于一个 <i> 标签，并且赋予唯一的一个类（class）。任何需要使用图标的地方，只需给 <i> 标签添加以 .icon- 为前缀的类即可。比如，要使用搜索图标，就给 <i> 标签添加 .icon-search 类,例如：

用户 <i class="icon-user"></i> 家 icon-home 、购物车：icon-shopping-cart

上传下载链接： icon-open icon-save icon-link

搜索： icon-search 分享 icon-share icon-share-alt

刷新： icon-refresh 加载： icon-repeat 发送： icon-send

上下左右单箭头：icon--arrow-up icon-arrow-down iconicon-arrow-left icon-arrow-right

上下左右尖角号： icon-chevron-up icon-chevron-down icon-chevron-left icon-chevron-right

快进、快退： icon-forward icon-backward

上一首、下一首： icon-fast-forward icon-fast-backward

播放、暂停、停止： icon-play icon-pause icon-stop

声音大小： icon-volume-up icon-volume-down 静音： icon-volume-off

闹钟： icon-bell 耳机： icon-headphones

手机电话： icon-phone-alt icon-phone

条形码 icon-barcode 二维码 icon-qrcode 书icon-book 书签 icon-bookmark

相机、录像机： icon-camera icon-facetime-video

音乐、电影： icon-music icon-film

列表、定位： icon-list icon-map-marker

放大缩小： icon-zoom-in icon-zoom-out

警告：icon-warning-sign 修理：icon-wrench 回形针icon-paperclip

八．导航

1.细线导航

<li><a href="#">Profile</a></li>

<li><a href="#">Messages</a></li>

</ul>

2.胶囊导航

<li><a href="#">Profile</a></li>

<li><a href="#">Messages</a></li>

</ul>

Pills 可以竖直堆叠。只要加上.nav-stacked。

3.面包屑导航

<li><a href="#">Library</a></li>

</ol>

4.堆叠胶囊导航

<li><a href="#">Profile</a></li>

<li><a href="#">Messages</a></li>

</ul>

5.两端对齐细线导航

<li><a href="#">Profile</a></li>

<li><a href="#">Messages</a></li>

</ul>

6.两端对齐胶囊导航

<li><a href="#">Profile</a></li>

<li><a href="#">Messages</a></li>

</ul>

禁用链接

对任何导航（包括标签页，pills，或列表，加入disabled使链接为灰色且没有鼠标悬停效果。

7.带下拉框的细线导航

Dropdown <span class="caret"></span>

</a>

</ul>

</li>

</ul>

8.带下拉菜单的胶囊导航

Dropdown <span class="caret"></span>

</a>

</ul>

</li>

</ul>

9.默认导航条

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="#">Brand</a>

</div>

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li><a href="#">Separated link</a></li>

<li><a href="#">One more separated link</a></li>

</ul>

</li>

</ul>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li><a href="#">Separated link</a></li>

</ul>

</li>

</ul>

</div>

</nav>

10.导航添加

1.表单

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

2.按钮

3.文本

<p class="navbar-text">Signed in as Mark Otto</p>

10.导航位置

1.固定定位上部<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> </nav>

2.固定定位下部<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> </nav>

3.静止在上部：<nav class="navbar navbar-default navbar-static-top" role="navigation"> </nav>

4.静止在下部：<nav class="navbar navbar-default navbar-static-bottom" role="navigation"> </nav>

11.反色导航条

</ul>

</nav>

12分页和翻页

1.分页.active是当前页

</ul>

禁止点击：<li class="active"><span>1 <span class="sr-only">(current)</span></span></li>

尺寸：<ul class="pagination pagination-lg">...</ul>

2.翻页

</ul>

两边对齐

</ul>

可选禁用

<li class="previous disabled"><a href="#">← Older</a></li>

<li class="next"><a href="#">Newer →</a></li>

</ul>

九.js插件

1.弹框

<button type="button" class="btn btn-default" title="Popover title"

data-container="body" data-toggle="popover" data-placement="left"

data-content="左侧的 Popover 中的一些内容">

左侧的 Popover

</button>

<button type="button" class="btn btn-primary" title="Popover title"

data-container="body" data-toggle="popover" data-placement="top"

data-content="顶部的 Popover 中的一些内容">

顶部的 Popover

</button>

<button type="button" class="btn btn-success" title="Popover title"

data-container="body" data-toggle="popover" data-placement="bottom"

data-content="底部的 Popover 中的一些内容">

底部的 Popover

</button>

<button type="button" class="btn btn-warning" title="Popover title"

data-container="body" data-toggle="popover" data-placement="right"

data-content="右侧的 Popover 中的一些内容">

右侧的 Popover

</button>

</div>

$(function (){

$("[data-toggle='popover']").popover();

});

</script>

<div class="container" style="padding: 100px 50px 10px;" > <button type="button" class="btn btn-default popover-show" title="Popover title" data-container="body" data-toggle="popover" data-placement="left" data-content="左侧的 Popover 中的一些内容 —— show 方法"> 左侧的 Popover </button> <button type="button" class="btn btn-primary popover-hide" title="Popover title" data-container="body" data-toggle="popover" data-placement="top" data-content="顶部的 Popover 中的一些内容 —— hide 方法"> 顶部的 Popover </button> <button type="button" class="btn btn-success popover-destroy" title="Popover title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="底部的 Popover 中的一些内容 —— destroy 方法"> 底部的 Popover </button> <button type="button" class="btn btn-warning popover-toggle" title="Popover title" data-container="body" data-toggle="popover" data-placement="right" data-content="右侧的 Popover 中的一些内容 —— toggle 方法"> 右侧的 Popover </button><br><br><br><br><br><br> <p class="popover-options"> <a href="#" type="button" class="btn btn-warning" title="<h2>Title</h2>" data-container="body" data-toggle="popover" data-content=" <h4>Popover 中的一些内容 —— options 方法</h4>"> Popover </a> </p> <script>

$(function () { $('.popover-show').popover('show');}); $(function () { $('.popover-hide').popover('hide');}); $(function () { $('.popover-destroy').popover('destroy');}); $(function () { $('.popover-toggle').popover('toggle');}); $(function () { $(".popover-options a").popover({html : true });});

</script> </div>

2.模态框(弹框)

×</button>

</div>

</div>

3.轮播图

</ol>

...

</div>

...

</div>

</a>

</a></div>

轮播切换时间：$(function(){ $('.carousel').carousel({ interval:200 }); });

从左到右循环各帧:.carousel('cycle') 停止轮播:.carousel('pause')

将轮播定位到指定的帧上（帧下标以0开始，类似数组）:.carousel(number)

返回到上一帧:.carousel('prev') 转到下一帧:.carousel('next')

</ol>

</div>

</div>

</div>

< icon-chevron-left"></span>

</a>

< icon-chevron-right"></span>

</a>

</div>

10.特效

1.滚动监听

2.导航

BootStrap教程从入门到精通

Bootstarp

一.栅格

二.文本

1.p标签

2.span标签

3.缩略语、引用

4.列表

5.徽章

6.缩略图

7.警告框

8.进度条

9.媒体列表

10.列表组

11.面板

12.超大屏幕

13.折叠内容

三.表格

四.表单

1. 基本案例:

2.内联表单

3.水平排列的表单

4.表单控件

5.文本域

6.checkbox和radio

7.Select

8.禁用文本框

9.表单校验

10.控件尺寸

五.按钮

1.按钮颜色

2.按钮尺寸

3.加载按钮

4.按钮充满父元素

5.活动状态

6.链接转按钮

7.禁用链接

8.禁用

9.单选按钮

10.按钮组

六.图片

七.图标

八．导航

1.细线导航

2.胶囊导航

3.面包屑导航

4.堆叠胶囊导航

5.两端对齐细线导航

6.两端对齐胶囊导航

7.带下拉框的细线导航

8.带下拉菜单的胶囊导航

9.默认导航条

10.导航添加

10.导航位置

11.反色导航条

九.js插件

1.弹框

2.模态框(弹框)

3.轮播图

10.特效

1.滚动监听

2.导航

3.轮播

4.form、缩略图、折叠

5.面板

6.表格

7.输入框、搜索框、单复选框、下拉选框

相关文章