BootstrapBootstrap学习笔记(三)

三、组件

  1、图标字体    

     图标字体本质是仿,而休是图形!可以尽放大或改颜色。   

    使用方法:<span
class=”glyphicon glyphicon-XXX”></span>

    一组span标签只能放一个图标

  2、按钮组件    

    <div
class=”btn-group”>

    .btn

    …

    .btn

    </div>

    水平按钮组:.btn-group

    竖直按钮组:.btn-vertical

    两端对联合之按钮组:.btn-group .btn-group-jusitified  

Bootstrap 1Bootstrap 2

  1 <!DOCTYPE html>
  2 <html lang="zh-cn">
  3   <head>
  4     <meta charset="utf-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <meta name="viewport" content="width=device-width, initial-scale=1">
  7     <title>Bootstrap组件——图标文件</title>
  8     <!-- Bootstrap -->
  9     <link href="css/bootstrap.css" rel="stylesheet">
 10     <!--[if lt IE 9]>
 11       <script src="js/html5shiv.min.js"></script>
 12       <script src="js/respond.min.js"></script>
 13     <![endif]-->
 14   </head>
 15     <body>
 16         <div class="container">
 17             <h2>组件 —— 按钮组</h2>
 18             <h3>水平按钮组</h3>
 19             <div class="btn-group">
 20                 <a href="#" class="btn btn-info">
 21                 
 22                 </a>
 23                 <a href="#" class="btn btn-info">
 24                     
 25                 </a>
 26                 <a href="#" class="btn btn-info">
 27                     
 28                 </a>
 29                 <a href="#" class="btn btn-info">
 30                     
 31                 </a>
 32                 <a href="#" class="btn btn-info">
 33                     
 34                 </a>
 35                 <a href="#" class="btn btn-info">
 36                     
 37                 </a>
 38                 <a href="#" class="btn btn-info">
 39                     
 40                 </a>
 41                 <a href="#" class="btn btn-info">
 42                     
 43                 </a>
 44                 <a href="#" class="btn btn-info">
 45                     
 46                 </a>
 47             </div>
 48             <hr>
 49             <h3>两端调整对齐</h3>
 50             <div class="btn-group btn-group-justified">
 51                 <a href="#" class="btn btn-info">
 52                 
 53                 </a>
 54                 <a href="#" class="btn btn-info">
 55                     
 56                 </a>
 57                 <a href="#" class="btn btn-info">
 58                     
 59                 </a>
 60                 <a href="#" class="btn btn-info">
 61                     
 62                 </a>
 63                 <a href="#" class="btn btn-info">
 64                     
 65                 </a>
 66                 <a href="#" class="btn btn-info">
 67                     
 68                 </a>
 69                 <a href="#" class="btn btn-info">
 70                     
 71                 </a>
 72                 <a href="#" class="btn btn-info">
 73                     
 74                 </a>
 75                 <a href="#" class="btn btn-info">
 76                     
 77                 </a>
 78             </div>
 79             <hr>
 80             <h3>竖直按钮组</h3>
 81             <div class="btn-group-vertical">
 82                 <a href="#" class="btn btn-info">
 83                 
 84                 </a>
 85                 <a href="#" class="btn btn-info">
 86                     
 87                 </a>
 88                 <a href="#" class="btn btn-info">
 89                     
 90                 </a>
 91                 <a href="#" class="btn btn-info">
 92                     
 93                 </a>
 94                 <a href="#" class="btn btn-info">
 95                     
 96                 </a>
 97                 <a href="#" class="btn btn-info">
 98                     
 99                 </a>
100                 <a href="#" class="btn btn-info">
101                     
102                 </a>
103                 <a href="#" class="btn btn-info">
104                     
105                 </a>
106                 <a href="#" class="btn btn-info">
107                     
108                 </a>
109             </div>
110         </div>
111 
112         <script src="js/jquery-1.11.3.js"></script>
113         <script src="js/bootstrap.js"></script>
114     </body>
115 </html>

View Code

  3、下拉菜单

    下拉菜单必需的老三层组织:      

       <div
class=”dropdown”> //相对定位的父元素

          <a datatoggle=”dropdown”>触发元素</a>
//触发元素

          <div/ul class=”dropdown-menu”>
//绝对定点默认隐藏的菜系

            隐藏元素

          </div/ul>

      <div>

Bootstrap 3Bootstrap 4

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3   <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>下拉菜单</title>
 8     <!-- Bootstrap -->
 9     <link href="css/bootstrap.css" rel="stylesheet">
10     <!--[if lt IE 9]>
11       <script src="js/html5shiv.min.js"></script>
12       <script src="js/respond.min.js"></script>
13     <![endif]-->
14   </head>
15   <body>
16     <div class="container">
17         <h1>下拉菜单</h1>
18         <div class="dropdown">
19             <a data-toggle="dropdown" href="#" class="btn btn-default">产品大全
20                 
21             </a>
22             <ul class="dropdown-menu">
23                 <li><a href="#">冰箱</a></li>
24                 <li><a href="#">洗衣机</a></li>
25                 <li><a href="#">电视</a></li>
26                 <li><a href="#">尿不湿</a></li>
27                 <li><a href="#">奶粉</a></li>
28             </ul>
29         </div>
30     </div>
31 
32     <script src="js/jquery-1.11.3.js"></script>
33     <script src="js/bootstrap.js"></script>
34   </body>
35 </html>

View Code

  4、媒体对象 

    默认样式的传媒对象组件允许以一个情节块的左或右展示一个多媒体内容(图像、视频、音频)。   

    <div
class=”meida”>

      <div class=”mdia-left”></div>

      <div class=”mdia-body”></div>

      <!– <div class=”mdia-right”></div>
–>

    </div>

    媒体对象列表:用一点点额客的记号,就能够在列表内利用媒体对象组件(对评或者文章列表很有因此)。

    <div
class=”media-list”>

      <div
class=”media”>……</div>

      <div
class=”media”>……</div>

      <div
class=”media”>……</div>

    </div>

  5、列表组 

    列表组是活又有力的组件,不仅能够用于展示平组大概的素,还会用于复杂的定制的情节。

    最简单易行的列表组仅仅是一个暗含多单列表条目的无序列表,另外还索要装适当的接近。   

    用于ul/ol的列表组:

    <ul class=”list-group”>

      <li class=”list-group-item”>

    </ul>

    用于div的列表组

    <div class=”list-group”>

      <a class=”list-group-item” href=”#”>

    </div>

Bootstrap 5Bootstrap 6

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3   <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>列表组</title>
 8     <!-- Bootstrap -->
 9     <link href="css/bootstrap.css" rel="stylesheet">
10     <!--[if lt IE 9]>
11       <script src="js/html5shiv.min.js"></script>
12       <script src="js/respond.min.js"></script>
13     <![endif]-->
14   </head>
15   <body>
16     <div class="container">
17         <h1>Bootstrap组件——列表组</h1>
18     <h3>用于ul/ol的列表组</h3>
19     <ul class="list-group">
20       <li class="list-group-item">豆蔻年华</li>
21       <li class="list-group-item">青葱岁月</li>
22       <li class="list-group-item">峥嵘岁月</li>
23       <li class="list-group-item">人之暮年</li>
24     </ul>
25     <ul class="list-group">
26       <li class="list-group-item"><a href="#">豆蔻年华</a></li>
27       <li class="list-group-item"><a href="#">青葱岁月</a></li>
28       <li class="list-group-item"><a href="#">峥嵘岁月</a></li>
29       <li class="list-group-item"><a href="#">人之暮年</a></li>
30     </ul>
31 
32     <h3>用于div的列表组</h3>
33     <div class="list-group">
34       <a class="list-group-item" href="#">豆蔻年华</a>
35       <a class="list-group-item active" href="#">青葱岁月</a>
36       <a class="list-group-item" href="#">峥嵘岁月</a>
37       <a class="list-group-item" href="#">人之暮年</a>
38     </div>
39     </div>
40 
41     <script src="js/jquery-1.11.3.js"></script>
42     <script src="js/bootstrap.js"></script>
43   </body>
44 </html>

View Code

  6、导航

    Bootstrap
中的领航组件都靠和一个 .nav
类,状态类为是公家的。改变修饰类可以改样式。

    有些许种导航组件:

      –胶囊式导航组件

        <ul class=”nav nav-pills”></ul>

      –标签页式导航组件

        <ul class=”nav nav-pills”></ul> 

Bootstrap 7Bootstrap 8

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3   <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>媒体对象</title>
 8     <!-- Bootstrap -->
 9     <link href="css/bootstrap.css" rel="stylesheet">
10     <!--[if lt IE 9]>
11       <script src="js/html5shiv.min.js"></script>
12       <script src="js/respond.min.js"></script>
13     <![endif]-->
14   </head>
15   <body>
16     <div class="container">
17         <h1>Bootstrap组件——导航组件</h1>
18     <h2>标签页式的导航</h2>
19     <ul class="nav nav-tabs">
20       <li><a data-toggle="tab" href="#">10元套餐</a></li>
21       <li class="active"><a data-toggle="tab" href="#">20元套餐</a></li>
22       <li><a data-toggle="tab" href="#">30元套餐</a></li>
23     </ul>
24 
25     <h2>胶囊式的导航</h2>
26     <ul class="nav nav-pills">
27       <li><a data-toggle="tab" href="#">10元套餐</a></li>
28       <li class="active"><a data-toggle="tab" href="#">20元套餐</a></li>
29       <li><a data-toggle="tab" href="#">30元套餐</a></li>
30     </ul>
31 
32     <h2>标签页式的导航(满屏)</h2>
33     <ul class="nav nav-tabs nav-justified">
34       <li><a data-toggle="tab" href="#">10元套餐</a></li>
35       <li class="active"><a data-toggle="tab" href="#">20元套餐</a></li>
36       <li><a data-toggle="tab" href="#">30元套餐</a></li>
37     </ul>
38 
39     <h2>竖直排布的胶囊式导航</h2>
40     <ul class="nav nav-pills nav-stacked col-sm-2">
41       <li><a data-toggle="tab" href="#">10元套餐</a></li>
42       <li class="active"><a data-toggle="tab" href="#">20元套餐</a></li>
43       <li><a data-toggle="tab" href="#">30元套餐</a></li>
44     </ul>
45     </div>
46 
47     <script src="js/jquery-1.11.3.js"></script>
48     <script src="js/bootstrap.js"></script>
49   </body>
50 </html>

View Code

  7、响应式导航条

    导航条:navbar

    响应式导航条组成:导航修之重点(相当给文章标题)+内容结合(相当给列表项)

    ==》
navbar=navbar-header+navbar-collapse

    导航条的主脑整合:网站LOGO+菜单切换按钮(只以xs屏幕下显得)

    ==》
nav-header=nav-brand+nav-toggle

    内容做:导航+表单+超链接+文本+……

    ==》
nav-collopse=navbar-nav+navbar-form+navbar-link+nav-text+……    

     导航条的主干组织——看XS中展开后的功力:

    Bootstrap 9

 

    Bootstrap中提供的导航条之分类:

      1) 按照颜色来分:

        nav-dafault:浅色底、深色字

        nav-inverse:深色底、浅色字

      2) 按照职位来分:

        顶部导航条

        底部导航条

      3) 按照固定(position)方式分

        相对固定:relative(默认),占布局空间,随内容滚动

        固定定位:fixed,不占用布局空间,不按照内容之轮转而滚动

             navbar-fixed-top

             navbar-fixed-bottom

    注意:固定定位的领航漫长不占用布局空间,body必须装足够的margin-top/bottom,否则有内容会给导航条覆盖。

Bootstrap 10Bootstrap 11

  1 <!DOCTYPE html>
  2 <html lang="zh-cn">
  3   <head>
  4     <meta charset="utf-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <meta name="viewport" content="width=device-width, initial-scale=1">
  7     <title>Bootstrap组件——响应式导航条</title>
  8     <!-- Bootstrap -->
  9     <link href="css/bootstrap.css" rel="stylesheet">
 10     <!--[if lt IE 9] -->
 11       <script src="js/html5shiv.min.js"></script>
 12       <script src="js/respond.min.js"></script>
 13     <!-- [endif]-->    
 14     <style>
 15       body {
 16         /*margin-top: 50px;*/
 17         margin-bottom: 50px;
 18       }
 19     </style>
 20   </head>
 21   <body>
 22     <div class="navbar navbar-default">
 23       <div class="container">
 24         <div class="navbar-header">
 25           <a href="#" class="navbar-brand">TEARENA</a>
 26           <a href="#" class="navbar-toggle">
 27             
 28             
 29             
 30           </a>
 31         </div>
 32         <div class="navbar-collapse">
 33           <ul class="nav navbar-nav">
 34             <li><a href="#">HOME</a></li>
 35             <li class="active"><a href="#">NEWS</a></li>
 36             <li class="dropdown">
 37               <a href="#" data-toggle="dropdown">PRODUCTS</a>           
 38               <ul class="dropdown-menu">
 39                 <li><a href="#">冰箱</a></li>
 40                 <li><a href="#">电视</a></li>
 41                 <li><a href="#">洗衣机</a></li>
 42                 <li><a href="#">空调</a></li>
 43                 <li><a href="#">箱包</a></li>
 44                 <li><a href="#">奶粉</a></li>
 45               </ul>
 46             </li>
 47           </ul>
 48 
 49           <a href="#" class="navbar-link navbar-text navbar-right">Register</a>
 50           |
 51           <button class="navbar-right navbar-btn btn btn-success btn-sm">Login</button>
 52 
 53           <form action="" class="navbar-form navbar-right">
 54             <label for="search" class="sr-only">请输入搜索内容:</label>          
 55             <div class="input-group">
 56               <input type="text" class="form-control search" placeholder="Search for...">
 57               
 58                 <button class="btn btn-default" type="button">
 59                   
 60                 </button>
 61               
 62             </div>
 63           </form>
 64         </div>
 65       </div>
 66     </div>  
 67 
 68     <div class="container">
 69       <h1>Bootstrap组件——响应式导航条</h1>
 70     </div>  
 71 
 72     <div class="navbar navbar-fixed-bottom navbar-inverse">
 73       <div class="container">
 74         <div class="navbar-header">
 75           <a href="#" class="navbar-brand"><img src="img/logo.png" style="margin-top: -16px;"></a>
 76           <a href="#" class="navbar-toggle">
 77             
 78             
 79             
 80           </a>
 81         </div>
 82         <div class="navbar-collapse">
 83           <ul class="nav navbar-nav navbar-right">
 84             <li><a href="#">HOME</a></li>
 85             <li class="active"><a href="#">NEWS</a></li>
 86             <li class="dropdown">
 87               <a href="#" data-toggle="dropdown">PRODUCTS</a>           
 88               <ul class="dropdown-menu">
 89                 <li><a href="#">冰箱</a></li>
 90                 <li><a href="#">电视</a></li>
 91                 <li><a href="#">洗衣机</a></li>
 92                 <li><a href="#">空调</a></li>
 93                 <li><a href="#">箱包</a></li>
 94                 <li><a href="#">奶粉</a></li>
 95               </ul>
 96             </li>
 97           </ul>
 98         </div>
 99       </div>
100     </div>
101 
102     <script src="js/jquery-1.11.3.js"></script>
103     <script src="js/bootstrap.js"></script>
104   </body>
105 </html>

View Code

   8、其他      

      面包屑导航:ul/ol.breadcrumb

      数字型分页:ul/ol.pagination

      翻页行分页条:ul/ol.page

      标签:<span
class=”label”>提示文字</span>

      徽章:<span class=”badge”>数字</span>

      巨幕:<div class=”jumbotron”></div>

      页头:<div class=”page-header”></div>

      水井:div.well

      进度条:.progress>.pregress-bar

      缩略图:<div/a class=”thumgnail”></div/a>

    

相关文章