1、链接一齐的分页按键

1.图标     

<ul >
  <li><a >«第一页</a></li>
  <li><a >上一页</a></li>
  <li><a >下一页</a></li>
  <li ><a >最终一页»</a></li>
</ul>  

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

 

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

2、开关行的分页样式

         </button>

在选拔中,翻页分页导航和带页码的分页导航类似,为ul标签进入pager类。

二下拉列表

例如:

         <div class=”dropdown”>

<ul >
  <li><a >«上一页</a></li>
  <li><a >下一页»</a></li>
</ul>
<!–左右对齐–>
<ul >
  <li ><a >«上一页</a></li>
  <li ><a >下一页»</a></li>
</ul>
<!–禁止状态–>
<ul >
  <li ><span>«上一页</span></li>
  <li><a >下一页»</a></li>
</ul> 

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

四.输入框组

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

五.Bootstrap 导航成分

         <ul class=”nav nav-tabs”>

            <li class=”active”><a
href=”#永利开户送38元体验金,”>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,则会创制3个青蓝的链接,同时禁止使用了该链接的 :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=”#”>另2个分开的链接</a></li>

                       </ul>

                    </li>

               </ul>

            </div>

         </nav>

 

         响应式:您要折叠的剧情必须包裹在含有 classes
.collapse、.navbar-collapse 的 <div> 中。

                   折叠起来的导航栏实际上是3个包蕴 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。

柒.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 来赢得3个颜料变淡的外观。

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

1二.Bootstrap 页面标题(Page Header)

         <div class=”page-header”>

            <h一>页面标题实例

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

 

相关文章