Bootstrap框架

初识Bootstrap

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

两种引用方式：

方式1：Bootstrap 专门构建了免费的 CDN 加速服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费


"en">

    "UTF-8">
     "viewport" content="width=device-width, initial-scale=1">


    
    "stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    
    "stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    
    
    

    Bootstrap-demo



class="container">
方式一

方式2(本地)：


"en">

    "UTF-8">
     "viewport" content="width=device-width, initial-scale=1">
   "bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
   
   

   Bootstrap-demo



class="container">
方式二

Bootstrap的CSS

一 栅格系统(Grid System)


"en">

    "UTF-8">
     "viewport" content="width=device-width, initial-scale=1">

    "bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

    Bootstrap-demo
    





class="container">

  
class="row">
      
class="col-md-2">md-2

      
class="col-md-4">md-4

      
class="col-md-6">md-6

  


   
class="row">
      
class="col-md-6 col-sm-4">md6-sm4

      
class="col-md-6 col-sm-8">md6-sm8

  



class="media">hello @media





            
class="row">
              
class="col-sm-2">md-2

              
class="col-sm-4">md-4

              
class="col-sm-6">md-6

            




            
class="row">
                   
class="col-md-2">col-md-3

                   
class="col-md-4 col-md-offset-4">col-md-offset-3

                   
            




            
class="row">
                  
class="col-md-9">
                       
class="row">
                           
class="col-md-8">col-md-8

                           
class="col-md-4">col-md-4

                       

                  

                  
class="col-md-3">col-md-3

            





    
class="row">
               
class="col-md-9 col-md-push-3">col-md-9

               
class="col-md-3 col-md-pull-9">col-md-3

    




    
class="row">
               
class="col-md-6 col-sm-1">col-md-1

               
class="clearfix visible-sm">

               
class="col-md-6 col-sm-1">col-md-3
栅格系统

二 排版


"en">

    "UTF-8">
     "viewport" content="width=device-width, initial-scale=1">

    "bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

    demo-排版





class="container">

  
class="row">
      
class="col-md-2">hello md-2

      class="col-md-4">md-4
      
class="col-md-6">md-6

  





    
我是h1

    
我是h2

    
我是h3

    
我是h4

    
我是h5

    
我是h6


    
    

    
h1...h1子标题

    
h2...h2子标题



 

    
   
class="lead">莫道君行早,更有早行人


    small

    strong

    em

    
class="text-left">文本左对齐

    
class="text-center">文本居中对齐

    
class="text-right">文本右对齐


    
class="text-primary">text-primary

    
class="text-success">text-success

    
class="text-info">text-info

    
class="text-warning">text-warning

    
class="text-danger">text-danger


 
   "HyperText Transfer Protocol">http

   "Domain Name System" class="initialism">dns

 

        

          oldboy

          XXX street

          beijing

          "Phone">P: (123) 456-7890
        



    
class="lead">hello world hello world hello world hello world

    
class="pull-left">
      发布于 2017-02-19
    




    

    



未定义样式列表


    class="list-unstyled">
  
  • item
    • 
  
  • item
    • 
  
  • item
    • 
  
  • item
    • 



内联列表


    class="list-inline">
  
  • item
    • 
  
  • item
    • 
  
  • item
    • 
  
  • item
    • 




水平的定义列表


class="dl-horizontal">
  
Desc

  
item

  
Desc

  
item
排版

三 代码

Bootstrap 允许您以两种方式显示代码：

第一种是 标签。如果您想要内联显示代码，那么您应该使用 标签。

第二种是 

 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用



class="container">

<p>hello</p> 是一个p标签


如果需要把代码显示为一个独立的块元素，请使用 <pre>

    <div&gt;
        <h1>介绍</h1&gt;
    </div&gt;






四 表格 


表格样式






class="container">

  class="table table-striped">
      class="danger">
          class="success">
          class="warning">
          

      条纹表格布局
      
        

          姓名
          年龄
          salary
        

      
      
        

          Bob
          23
          3000
        

        
steven
          34
          5000
        

        
alvin
          33
          7000
        


        
alvin
          33
          7000
        

      
    






响应式表格


通过把任意的 .table 包在 .table-responsive class 内可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，看不到任何的差别。 


五 表单


Bootstrap 提供了下列类型的表单布局：


垂直表单（默认）


内联表单水平表单


水平表单


垂直表单


创建基本表单的步骤：


向父 
 元素添加 role="form"。


把标签和控件放在一个带有 class .form-group 的 
 中。这是获取最佳间距所必需的。


向所有的文本元素 、