Bootstrap CSS

名称	城市
Tanmay	Bangalore
Sachin	Mumbai

名称	城市	邮编
Tanmay	Bangalore	560001
Sachin	Mumbai	400003
Uma	Pune	411027

上下文表格布局
产品	付款日期	状态
产品1	23/11/2013	待发货
产品2	10/11/2013	发货中
产品3	20/10/2013	待确认
产品4	20/10/2013	已退货

Bootstrap 排版

标题




 
Bootstrap 实例 - 内联子标题

  





    我是标题1 h1. 我是副标题1 h1 
    我是标题2 h2. 我是副标题2 h2
    我是标题3 h3. 我是副标题3 h3
    我是标题4 h4. 我是副标题4 h4
    我是标题5 h5. 我是副标题5 h5
    我是标题6 h6. 我是副标题6 h6

效果

强调

本行内容是在标签内

本行内容是在标签内

本行内容是在标签内，并呈现为斜体

向左对齐文本
居中对齐文本
向右对齐文本
本行内容是减弱的
本行内容带有一个 primary class
本行内容带有一个 success class
本行内容带有一个 info class
本行内容带有一个 warning class
本行内容带有一个 danger class

效果

缩写

WWW

内联列表

  Item 1
  Item 2
  Item 3
  Item 4

定义列表

  Description 1
  Item 1
  Description 2
  Item 2

水平的定义列表

  Description 1
  Item 1
Item 1
  Description 2
  Item 2

image.png

image.png


    排版
    这是一个普通的段落。
    这是个文字突出的段落。
    这是一个普通的段落。

image.png

image.png

排版
    WHO 成立于 1948. (普通的 abbr)      
    WHO 成立于 1948。(略小 abbr)
    who 成立于 1948。(小写字母 who 转换为 WHO)

image.png

排版
设置 pre 元素可滚动：
    内容可滚动

image.png

    排版
    右对齐引用内容:
    
        For 50 years, WWF has been protecting the future of nature.tates and close to 5 million globally.
        From WWF's website

image.png

代码

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


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


 作为内联元素被包围。
如果需要把代码显示为一个独立的块元素，请使用  标签：
    
        Article Heading
    









image.png


表格

  
    
      名称
      城市
    
  
  
    
      Tanmay
      Bangalore
    
    
      Sachin
      Mumbai
    
  










image.png




通过添加 .table-striped class，您将在  内的行上看到条纹，如下面的实例所示：


  
    
      名称
      城市
      邮编
    
  
  
    
      Tanmay
      Bangalore
      560001
    
    
      Sachin
      Mumbai
      400003
    
    
      Uma
      Pune
      411027
    
  









image.png



通过添加 .table-bordered class，您将看到每个元素周围都有边框，且占整个表格是圆角的
 通过添加 .table-hover class，当指针悬停在行上时会出现浅灰色背景
 








image.png

 


  上下文表格布局
  
    
      产品
      付款日期
      状态
  
  
    
      产品1
      23/11/2013
      待发货
    
      产品2
      10/11/2013
      发货中
    
      产品3
      20/10/2013
      待确认
    
      产品4
      20/10/2013
      已退货
  









image.png


表单
输入框焦点
 当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。
 禁用的输入框 input
 如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。
 禁用的字段集 fieldset
 对 
 添加 disabled 属性来禁用  内的所有控件。
 验证状态
 Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。

  
    聚焦
    
      
    
  
  
    禁用
    
      
    
  
  
    
      禁用输入（Fieldset disabled）
      
        
      
    
    
      禁用选择菜单（Fieldset disabled）
      
        
      
    
  
  
    输入成功
    
      
    
  
  
    输入警告
    
      
    
  
  
    输入错误
    
      
    
  









image.png

Bootstrap CSS

Bootstrap 排版

我是标题1 h1. 我是副标题1 h1

我是标题2 h2. 我是副标题2 h2

我是标题3 h3. 我是副标题3 h3

我是标题4 h4. 我是副标题4 h4

我是标题5 h5. 我是副标题5 h5

我是标题6 h6. 我是副标题6 h6

内联列表

定义列表

水平的定义列表

排版

排版

排版

排版

代码

你可能感兴趣的:(Bootstrap CSS)