码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap3组件--2

时间:2015-08-16 12:12:29      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:

目录

1. 分页

2. 标签

3. 徽章

4. 巨幕

5. 页头

6. 缩略图

7. 警告框

8. 进度条

9. 列表组

10. 面板

11.Well

 

1. 分页

 1 <!doctype html>
 2 <html lang=‘zh-cn‘>
 3 <head>
 4     <title>Hello World!</title>
 5     <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘>
 6     <script src=‘js/jquery2.min.js‘></script>
 7     <script src=‘js/bootstrap.min.js‘></script>    
 8 </head>
 9 
10 <body> 
11     <nav>
12         //默认分页
13         <ul class=‘pagination‘>
14             <li><a href=‘#‘><span>&laquo;</span>
15             <li class=‘active‘><a href=‘#‘>1</a></li>
16             <li><a href=‘#‘>2</a></li>
17             <li><a href=‘#‘>3</a></li>
18             <li><a href=‘#‘>4</a></li>
19             <li><a href=‘#‘><span>&raquo;</span>
20         </ul>
21         
22         //翻页
23         <ul class=‘pager‘>
24             <li><a href=‘#‘>Previous</a></li>
25             <li><a href=‘#‘>Next</a></li>
26         </ul>
27         
28         //对齐链接
29         <ul class=‘pager‘>
30             <li class=‘previous‘><a href=‘#‘><span>&larr;</span> Older</a></li>
31             <li class=‘next‘><a href=‘#‘>Newer <span>&rarr;</span></a></li>
32         </ul>
33     </nav>
34 </body>
35 </html>

 

2. 标签

 1 <!doctype html>
 2 <html lang=‘zh-cn‘>
 3 <head>
 4     <title>Hello World!</title>
 5     <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘>
 6     <script src=‘js/jquery2.min.js‘></script>
 7     <script src=‘js/bootstrap.min.js‘></script>    
 8 </head>
 9 
10 <body> 
11     <span class=‘label label-default‘>Default</span>
12     <span class=‘label label-primary‘>Primary</span>
13     <span class=‘label label-success‘>Success</span>
14     <span class=‘label label-info‘>Info</span>
15     <span class=‘label label-warning‘>Warning</span>
16     <span class=‘label label-danger‘>Danger</span>
17 </body>
18 </html>

 

3. 徽章

 1 <!doctype html>
 2 <html lang=‘zh-cn‘>
 3 <head>
 4     <title>Hello World!</title>
 5     <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘>
 6     <script src=‘js/jquery2.min.js‘></script>
 7     <script src=‘js/bootstrap.min.js‘></script>    
 8 </head>
 9 
10 <body> 
11     //给链接、导航等元素嵌套span class=‘badge‘元素,可以很醒目的展示新的或未读的信息条目
12     <a href=‘#‘>Inbox <span class=‘badge‘>42</span></a>
13     
14     <button class=‘btn btn-primary‘>Messages <span class=‘badge‘>4</span></button>
15     
16     <ul class=‘nav nav-pills‘>
17         <li class=‘active‘><a href=‘#‘>Home <span class=‘badge‘>42</span></a></li>
18         <li><a href=‘#‘>Profile</a></li>
19         <li><a href=‘#‘>Messages <span class=‘badge‘>3</span></a></li>
20     </ul>
21 </body>
22 </html>

 

4. 巨幕

 1 <!doctype html>
 2 <html lang=‘zh-cn‘>
 3 <head>
 4     <title>Hello World!</title>
 5     <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘>
 6     <script src=‘js/jquery2.min.js‘></script>
 7     <script src=‘js/bootstrap.min.js‘></script>    
 8 </head>
 9 
10 <body> 
11     <div class=‘jumbotron‘>
12         <h1>Hello World!</h1>
13         <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
14         <p><a class=‘btn btn-primary btn-lg‘ href=‘#‘>Learn more</a></p>
15     </div>
16 </body>
17 </html>

 

5. 页头

页头组件能够为 h1 标签增加适当的空间,并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果,还支持大部分其他组件(需要增加一些额外的样式)。

 1 <!doctype html>
 2 <html lang=‘zh-cn‘>
 3 <head>
 4     <title>Hello World!</title>
 5     <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘>
 6     <script src=‘js/jquery2.min.js‘></script>
 7     <script src=‘js/bootstrap.min.js‘></script>    
 8 </head>
 9 
10 <body> 
11     <div class=‘page-header‘>
12         <h1>Example page header <small>Subtext for header</small></h1>
13     </div>
14 </body>
15 </html>

 

6. 缩略图

 1 <!doctype html>
 2 <html lang=‘zh-cn‘>
 3 <head>
 4     <title>Hello World!</title>
 5     <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘>
 6     <script src=‘js/jquery2.min.js‘></script>
 7     <script src=‘js/bootstrap.min.js‘></script>    
 8 </head>
 9 
10 <body> 
11     <div class=‘row‘>
12         <div class=‘col-sm-6 col-md-4‘>
13             <div class=‘thumbnail‘>
14                 <img src=‘...‘ alt=‘...‘>
15                 <div class=‘caption‘>
16                     <h3>Thumbnail label</h3>
17                     <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
18                     <p><a href=‘#‘ class=‘btn btn-primary‘>Button</a><a href=‘#‘ class=‘btn btn-primary‘>button</a></p>
19                 </div>
20             </div>
21         </div>
22         <div class=‘col-sm-6 col-md-4‘>
23             <div class=‘thumbnail‘>
24                 <img src=‘...‘ alt=‘...‘>
25                 <div class=‘caption‘>
26                     <h3>Thumbnail label</h3>
27                     <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
28                     <p><a href=‘#‘ class=‘btn btn-primary‘>Button</a><a href=‘#‘ class=‘btn btn-primary‘>button</a></p>
29                 </div>
30             </div>
31         </div>
32     </div>
33 </body>
34 </html>

 

7. 警告框

警告框组件通过提供一些灵活的预定义消息,为常见的用户动作提供反馈消息。将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框,.alert 类是必须要设置的,另外我们还提供了有特殊意义的4个类(例如,.alert-success),代表不同的警告信息。警告框没有默认类,只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您要使用一种有意义的警告类。目前提供了成功、消息、警告或危险。

 1 <!doctype html>
 2 <html lang=‘zh-cn‘>
 3 <head>
 4     <title>Hello World!</title>
 5     <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘>
 6     <script src=‘js/jquery2.min.js‘></script>
 7     <script src=‘js/bootstrap.min.js‘></script>    
 8 </head>
 9 
10 <body> 
11     <div class=‘alert alert-success‘>Well done! You successfully read this important alert message. </div>
12     <div class=‘alert alert-info‘>Well done! You successfully read this important alert message. </div>
13     <div class=‘alert alert-warning‘>Well done! You successfully read this important alert message. </div>
14     <div class=‘alert alert-danger‘>Well done! You successfully read this important alert message. </div>
15     
16     //为警告框添加一个可选的.alert-dismissible 类和一个关闭按钮,务必给 button>元素添加 data-dismiss="alert" 属性。
17     <div class=‘alert alert-warning alert-dismissible‘>
18         <button class=‘close‘ data-dismiss=‘alert‘><span>&times;</span></button>
19         <strong>Warning!</strong> Better check yourself, you‘re not looking too good.
20     </div>
21 </body>
22 </html>

 

8. 进度条

 1 <!doctype html>
 2 <html lang=‘zh-cn‘>
 3 <head>
 4     <title>Hello World!</title>
 5     <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘>
 6     <script src=‘js/jquery2.min.js‘></script>
 7     <script src=‘js/bootstrap.min.js‘></script>    
 8 </head>
 9 
10 <body> 
11     <div class=‘progress‘>
12         <div class=‘progress-bar‘ style=‘width: 60%;‘>
13             <span class=‘sr-only‘>60% Complete</span>
14         </div>
15     </div>
16     
17     //将设置了 .sr-only 类的span标签从进度条组件中移除 类,从而让当前进度显示出来
18     <div class=‘progress‘>
19         <div class=‘progress-bar‘ style=‘width: 60%;‘>
20             60%
21         </div>
22     </div>
23 </body>
24 </html>

 

9. 列表组

列表组中的每个元素都可以是任何 HTML 内容,如列表、徽章、链接、按钮,甚至是像下面的带链接的列表组。

 1 <!doctype html>
 2 <html lang=‘zh-cn‘>
 3 <head>
 4     <title>Hello World!</title>
 5     <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘>
 6     <script src=‘js/jquery2.min.js‘></script>
 7     <script src=‘js/bootstrap.min.js‘></script>    
 8 </head>
 9 
10 <body> 
11     <div class=‘list-group‘>
12         <li class=‘list-group-item‘>Cras justo odio</li>
13         <li class=‘list-group-item‘>Dapibus ac facilisis in</li>
14         <li class=‘list-group-item‘>Morbi leo risus</li>
15     </div>
16     
17     //给列表组加入徽章组件,它会自动被放在右边
18     <div class=‘list-group‘>
19         <li class=‘list-group-item‘>
20             <span class=‘badge‘>14</span>
21             Cras justo odio
22         </li>
23     </div>
24     
25     <div class=‘list-group‘>
26         <a href=‘#‘ class=‘list-group-item active‘>
27             <h4 class=‘list-group-item-heading‘>List group item heading</h4>
28             <p class=‘list-group-item-text‘>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. </p>
29         </a>
30         <a href=‘#‘ class=‘list-group-item‘>
31             <h4 class=‘list-group-item-heading‘>List group item heading</h4>
32             <p class=‘list-group-item-text‘>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. </p>
33         </a>
34     </div>
35 </body>
36 </html>

 

10. 面板

 1 <!doctype html>
 2 <html lang=‘zh-cn‘>
 3 <head>
 4     <title>Hello World!</title>
 5     <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘>
 6     <script src=‘js/jquery2.min.js‘></script>
 7     <script src=‘js/bootstrap.min.js‘></script>    
 8 </head>
 9 
10 <body> 
11     <div class=‘panel panel-primary‘>
12         <div class=‘panel-heading‘>
13             <h3 class=‘panel-title‘>Panel title</h3>
14         </div>
15         <div class=‘panel-body‘>
16             Panel Content
17         </div>
18         <div class=‘panel-footer‘>Panel footer</div>
19     </div>
20 </body>
21 </html>

 

11. Well

把 Well 用在元素上,能有嵌入(inset)的的简单效果。

 1 <!doctype html>
 2 <html lang=‘zh-cn‘>
 3 <head>
 4     <title>Hello World!</title>
 5     <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘>
 6     <script src=‘js/jquery2.min.js‘></script>
 7     <script src=‘js/bootstrap.min.js‘></script>    
 8 </head>
 9 
10 <body> 
11     <div class=‘well‘>Hello world</div>
12     <div class=‘well well-lg‘>Hello world</div>
13     <div class=‘well well-sm‘>Hello world</div>
14 </body>
15 </html>

 

Bootstrap3组件--2

标签:

原文地址:http://www.cnblogs.com/xianglongsdu/p/4733774.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!