BootStrap3.0学习--组件

Glyphicons 字体图标

1.图标需要一个基类和对应图标的类，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。

2.和<span>标签联合使用，不能直接放在组件上

<span class="glyphicon glyphicon-search"></span>

3.实例：

<button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star"></span> Star </button>

下拉菜单

1.将下拉菜单触发器和下拉菜单都包裹在?.dropdown?里。

<div class="dropdown">
  button ="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle>
    Dropdown
    span ="caret"></span</buttonul ="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    li role="presentation"><a ="menuitem" tabindex="-1" href="#">Actionali>Another action>Something else here>Separated linkul>
div>

2.添加标题

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> ... <li role="presentation" class="dropdown-header">Dropdown header</li> ... </ul>

3.添加分割线

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider"> ... <li role="presentation" class="divider"></li> ... </ul>

4.禁用菜单项

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

按钮组

1.基本实例

<div class="btn-group"> <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>

2.按钮工具栏

<div class="btn-toolbar" role="toolbar"> <div class="btn-group">...</div> <div class="btn-group">...</div> <div class="btn-group">...</div> </div>

3.尺寸

<div class="btn-group btn-group-lg">...</div> <div class="btn-group">...</div> <div class="btn-group btn-group-sm">...</div> <div class="btn-group btn-group-xs">...</div>

4.嵌套

<div class="btn-group"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div>

5.垂直排列

<div class="btn-group-vertical"> ... </div>

6.两端对齐

<div class="btn-group btn-group-justified"> ... </div>

按钮式下拉菜单

1.单按钮下拉菜单

<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> </ul> </div>

2.分裂式按钮下拉菜单

<div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> </ul> </div>

<div class="btn-group"> <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> Large button <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> ... </ul> </div>

4.向上弹出式菜单：给父元素添加?.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"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <!-- Dropdown menu links --> </ul> </div>

输入框组

<div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div>

2.尺寸

<div class="input-group input-group-lg"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Username"> </div>

3.作为额外元素的多选框和单选框

4.作为额外元素的按钮

5.作为额外元素的按钮式下拉菜单

6.作为额外元素的分裂式按钮下拉菜单

导航

1.标签页：.nav-tabs?类依赖?.nav?基类。

<ul class="nav nav-tabs" role="tablist"> <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>

2.胶囊式标签页：nav-stacked垂直式堆叠排列

<ul class="nav nav-pills nav-stacked" role="tablist"> <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>

3.两端对齐的标签页：通过?.nav-justified类实现

4.禁用的连接：通过.disabled?类

5.添加下拉菜单：

<ul class="nav nav-tabs" role="tablist"> ... <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> ... </ul> </li> ... </ul>

导航条?

1.默认样式的导航条：

<nav class="navbar navbar-default" role="navigation">

</nav>

2.Brand image：

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"> <img alt="Brand" src="..."> </a> </div> </div> </nav>

3.表单

<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">Submit</button> </form>

4.按钮：加上.navbar-btn上可以在导航条里垂直居中

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

5.文本：把文本包裹在?.navbar-text中时，为了有正确的行距和颜色，通常使用?<p>?标签。

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

6.使用?.navbar-link?类可以让链接有正确的默认颜色和反色设置。

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

7.组件排列

通过添加?.navbar-left?和?.navbar-right?工具类让导航链接、表单、按钮或文本对齐。两个类都会通过 CSS 设置特定方向的浮动样式。

8.固定在顶部：添加?.navbar-fixed-top?类可以让导航条固定在顶部，还可包含一个?.container?或?.container-fluid?容器，从而让导航条居中，并在两侧添加内部（padding）。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> ... </div> </nav>

9.固定在底部：添加?.navbar-fixed-bottom?类可以让导航条固定在底部，并且还可以包含一个?.container?或?.container-fluid?容器，从而让导航条居中，并在两侧添加内部（padding）。

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> <div class="container"> ... </div> </nav>

10.静止在顶部：通过添加?.navbar-static-top?类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。还可以包含一个?.container?或?.container-fluid?容器，用于将导航条居中对齐并在两侧添加内部（padding）。

<nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container"> ... </div> </nav>

11.反色的导航条：通过添加?.navbar-inverse?类可以改变导航条的外观。

<nav class="navbar navbar-inverse" role="navigation"> ... </nav>

12.路径导航

<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li> </ol>

分页

1.默认分页：

<nav> <ul class="pagination"> <li><a href="#">&laquo;</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="#">&raquo;</a></li> </ul> </nav>

2.禁止激活状态

<nav> <ul class="pagination"> <li class="disabled"><a href="#">&laquo;</a></li> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> ... </ul> </nav>
注：还可以将 active 或 disabled 状态应用于?<span>?标签，即替换?<a>?标签，这样就可以让其保持需要的样式并移除点击功能。<span><a>

<nav><ul class="pagination pagination-lg">...</ul></nav> <nav><ul class="pagination">...</ul></nav> <nav><ul class="pagination pagination-sm">...</ul></nav>

4.翻页

<nav> <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> </nav>

5.对齐链接：两端对齐

<nav> <ul class="pager"> <li class="previous"><a href="#">&larr; Older</a></li> <li class="next"><a href="#">Newer &rarr;</a></li> </ul> </nav>

6.可选的禁用状态

<nav> <ul class="pager"> <li class="previous disabled"><a href="#">&larr; Older</a></li> <li class="next"><a href="#">Newer &rarr;</a></li> </ul> </nav>

标签

1.可用的变体

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

徽章?

1.给链接、导航等元素嵌套?<span class="badge">?元素，可以很醒目的展示新的或未读的信息条目。

<a href="#">Inbox <span class="badge">42</span></a> <button class="btn btn-primary" type="button"> Messages <span class="badge">4</span> </button>

巨幕?

<div class="jumbotron"> <h1>Hello,world!</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div>

页头

<div class="page-header"> <h1>Example page header <small>Subtext for header</small></h1> </div>

缩略图

1.默认样式的实例

<div class="row"> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img data-src="holder.js/100%x180" alt="..."> </a> </div> ... </div>

2.自定义内容

<div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img data-src="holder.js/300x300" alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> </div>

警告框

<div class="alert alert-success" role="alert">...</div> <div class="alert alert-info" role="alert">...</div> <div class="alert alert-warning" role="alert">...</div> <div class="alert alert-danger" role="alert">...</div>

2.可关闭的警告框：为警告框添加一个可选的?.alert-dismissible?类和一个关闭按钮。务必给?<button>?元素添加?data-dismiss="alert"?属性。

<div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> <strong>Warning!</strong> Better check yourself,you're not looking too good. </div>

3.警告框中加链接：

<div class="alert alert-success" role="alert"> <a href="#" class="alert-link">...</a> </div>

进度条

<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div>

2.带有提示标签的进度条

<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60% </div> </div>

3.根据情景变化

<div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div> </div>

4.条纹效果：ie8不支持

<div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div> </div>

5.动画效果

<div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> <span class="sr-only">45% Complete</span> </div> </div>

6.堆叠效果：把多个进度条放入同一个?.progress?中，使它们呈现堆叠的效果。

<div class="progress"> <div class="progress-bar progress-bar-success" style="width: 35%"> <span class="sr-only">35% Complete (success)</span> </div> <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%"> <span class="sr-only">20% Complete (warning)</span> </div> <div class="progress-bar progress-bar-danger" style="width: 10%"> <span class="sr-only">10% Complete (danger)</span> </div> </div>

媒体对象

1.默认样式：

<div class="media"> <a class="media-left" href="#"> <img src="..." alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Media heading</h4> ... </div> </div>

2.Media alignment

<div class="media"> <a class="media-left media-middle" href="#"> <img data-src="..." alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Middle aligned media</h4> ... </div> </div>

3.媒体对象列表

<ul class="media-list"> <li class="media"> <a class="media-left" href="#"> <img src="..." alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Media heading</h4> ... </div> </li> </ul>

列表组

<ul class="list-group"> <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>

2.徽章

<ul class="list-group"> <li class="list-group-item"> <span class="badge">14</span> Cras justo odio </li> </ul>

3.链接

<div class="list-group"> <a href="#" class="list-group-item active"> 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> </div>

4.被禁用的条目

<div class="list-group"> <a href="#" class="list-group-item disabled"> 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> </div>

5.情景类：为列表中的条目添加情境类，默认样式或链接列表都可以。还可以为列表中的条目设置?.active?状态。

<ul class="list-group"> <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li> <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li> </ul> <div class="list-group"> <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a> </div>

6.制定内容：列表组中的每个元素都可以是任何 HTML 内容，甚至是像下面的带链接的列表组。

<div class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">...</p> </a> </div>

面板

1.基本实例：默认的?.panel?组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。

<div class="panel panel-default"> <div class="panel-body"> Basic panel example </div> </div>

2.带标题的面板

<div class="panel panel-default"> <div class="panel-heading">Panel heading without title</div> <div class="panel-body"> Panel content </div> </div>

3.带脚注的面板

<div class="panel panel-default"> <div class="panel-body"> Panel content </div> <div class="panel-footer">Panel footer</div> </div>

4.情景效果

<div class="panel panel-primary">...</div> <div class="panel panel-success">...</div>

5.带表格的面板

<div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading">Panel heading</div> <div class="panel-body"> <p>...</p> </div> <!-- Table --> <table class="table"> ... </table> </div>

6.带列表组的面板

<div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading">Panel heading</div> <div class="panel-body"> <p>...</p> </div> <!-- List group --> <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> </ul> </div>

具有响应式特性的嵌入内容

<!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 4:3 aspect ratio --> <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="..."></iframe> </div>

Well

1.默认效果

<div class="well">...</div>

2.可选类

<div class="well well-lg">...</div>

<div class="well well-sm">...</div>