Bootstrap3.bootstrap-组件

1.图标     

         <button type=”button” class=”btn btn-default”>

                   <span class=”glyphicon
glyphicon-sort-by-attributes”></span>

         </button>

2生拉列表

         <div class=”dropdown”>

            <button type=”button” class=”btn dropdown-toggle”
id=”dropdownMenu1″

               data-toggle=”dropdown”>

               主题

               <span class=”caret”></span>

            </button>

            <ul class=”dropdown-menu” role=”menu” >

               <li role=”presentation”
class=”dropdown-header”>下拉菜单标题</li>

               <li role=”presentation” >

                    <a role=”menuitem” tabindex=”-1″
href=”#”>Java</a>

               </li>

               <li role=”presentation”>

                    <a role=”menuitem” tabindex=”-1″
href=”#”>数据挖掘</a>

               </li>

               <li role=”presentation”>

                    <a role=”menuitem” tabindex=”-1″ href=”#”>

                       数据通信/网络

                    </a>

               </li>

               <li role=”presentation” class=”divider”></li>

               <li role=”presentation”
class=”dropdown-header”>下拉菜单标题</li>

               <li role=”presentation”>

                    <a role=”menuitem” tabindex=”-1″
href=”#”>分离之链接</a>

               </li>

            </ul>

         </div>

3.按钮组

         <div class=”btn-toolbar” role=”toolbar”>

           <div class=”btn-group”>

           <button type=”button” class=”btn btn-default”>按钮
1</button>

           <button type=”button” class=”btn btn-default”>按钮
2</button>

           <button type=”button” class=”btn btn-default”>按钮
3</button>

          </div>

           <div class=”btn-group”>

           <button type=”button” class=”btn btn-default”>按钮
4</button>

           <button type=”button” class=”btn btn-default”>按钮
5</button>

           <button type=”button” class=”btn btn-default”>按钮
6</button>

           </div>

           <div class=”btn-group”>

           <button type=”button” class=”btn btn-default”>按钮
7</button>

           <button type=”button” class=”btn btn-default”>按钮
8</button>

           <button type=”button” class=”btn btn-default”>按钮
9</button>

           </div>

         </div>

4.输入框组

         <div class=”input-group”>

          <span class=”input-group-addon”>@</span>

          <input type=”text” class=”form-control”
placeholder=”twitterhandle”>

         </div>

 

         把按钮作为输入框组的前缀或者后缀元素,那个时候你固然无是增长
.input-group-addon class,您得运用 class .input-group-btn 来包裹按钮。

                   这是不可或缺的,因为默认的浏览器样式不相会被重写。

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

                   </div><!– /input-group –>

5.Bootstrap 导航元素

         <ul class=”nav nav-tabs”>

            <li class=”active”><a
href=”#”>Home</a></li>

            <li><a href=”#”>SVN</a></li>

            <li><a href=”#”>iOS</a></li>

            <li><a href=”#”>VB.Net</a></li>

            <li><a href=”#”>Java</a></li>

            <li><a href=”#”>PHP</a></li>

         </ul>

 

         表格导航或标签(nav-tabs)

         胶囊式的导航菜单(nav-pills)

         垂直的(nav-stacked)

         两端对旅之导航

                   您可以屏幕宽度大于 768px 时,通过在各自使用
.nav、.nav-tabs 或 .nav、.nav-pills 的以使 class
.nav-justified,让标签式或胶囊式导航菜单和父元素等方便。在重新有些之屏幕及,导航链接会堆叠。

         禁用链接

                   对每个 .nav class,即使上加了 .disabled
class,则会创立一个黑色的链接,同时禁用了该链接的 :hover 状态,

6.导航栏

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

            <div class=”navbar-header”>

               <a class=”navbar-brand”
href=”#”>W3Cschool</a>

            </div>

            <div>

               <ul class=”nav navbar-nav”>

                    <li class=”active”><a
href=”#”>iOS</a></li>

                    <li><a
href=”#”>SVN</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>

         </nav>

 

         响应式:您假设折叠的始末必须包裹在包含 classes
.collapse、.navbar-collapse 的 <div> 中。

                   折叠起来的导航栏实际上是一个含 class .navbar-toggle
及一定量独 data- 元素的按钮。

                   第一只是 data-toggle,用于告诉 JavaScript
需要针对按钮做啊,

                   第二独凡是
data-target,提醒要切换来啦一个因素。五只饱含 class .icon-bar 的
<span> 创立所谓的布拉格按钮。这一个会切换为 .nav-collapse <div>
中的因素。

         导航栏中的表单:使用 .navbar-form
class。这管了表单适当的直对同步和当可比狭小的视口中折叠的行为

         固定到顶部:让导航栏固定于页面的顶部,请向 .navbar class 添加
class .navbar-fixed-top。

7.Bootstrap 面包屑导航(Breadcrumbs)

         <ol class=”breadcrumb”>

           <li><a href=”#”>Home</a></li>

           <li><a href=”#”>2013</a></li>

           <li class=”active”>十一月</li>

         </ol>

8.分页

         <ul class=”pagination”>

           <li><a href=”#”>«</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=”#”>»</a></li>

         </ul>

 

         分页的状态     class .disabled、.active

         分页的深浅     class .pagination-*

 

         .pager                         添加该 class
来博翻页链接。        

         .previous, .next        使用 class .previous
把链接向左对联合,使用 .next 把链接向右边对伙同。        

         .disabled           添加该 class 来拿到一个颜料变淡的外观。

9.Bootstrap 标签   class .label

10.Bootstrap 徽章(Badges)

         徽章(Badges)首要用于优良展现新的或非念之宗。

         如需要以徽章,只待拿 <span class=”badge”>
添加到链接、Bootstrap 导航等这么些要素上即可。

 

         当没有新的或者不念之宗时,通过 CSS 的 :empty
采取器,徽章会折叠起来,表示中没有内容。

         激活导航状态         <span class=”badge”> 来激活链接

11.Bootstrap 重特大屏幕(Jumbotron)

         .jumbotron class

         为了博取占用全体小幅且无牵动圆角的超大屏幕,请于拥有的 .container
class 外使用 .jumbotron class

12.Bootstrap 页面标题(Page Header)

         <div class=”page-header”>

            <h1>页面标题实例

               <small>子标题</small>

            </h1>

         </div>

13.Bootstrap 缩略图

         <div class=”col-sm-6 col-md-3″>

                   <a href=”#” class=”thumbnail”>

                    <img
src=”/wp-content/uploads/2014/06/kittens.jpg”

                   alt=”通用的占位符缩略图”>

                   </a>

         </div>

14.Bootstrap 警告(Alerts)

 

         创设一个 <div>,并通往那长一个 .alert class 和

                   四单左右文 class(即
.alert-success、.alert-info、.alert-warning、.alert-danger)之一,来补充加一个着力的警告框。

15.进度条

         <div class=”progress”>

            <div class=”progress-bar” role=”progressbar” 
style=”width: 40%;”>

               <span class=”sr-only”>40% 完成</span>

            </div>

         </div>

16.Bootstrap 列表组

         <ul class=”list-group”>

            <li class=”list-group-item”>免费域名注册</li>

            <li class=”list-group-item”>免费 Window
空间托管</li>

         </ul>

17.Bootstrap 面板(Panels)

         只需要为 <div> 元素添加 class .panel 和 class
.panel-default 即可

18.Bootstrap Well

         Well 是平等种植会唤起内容凹陷展现或插图效果的器皿 <div>

 

相关文章