码迷,mamicode.com
首页 > Web开发 > 详细

Bootstrap学习 - 全局CSS样式

时间:2016-04-17 06:36:29      阅读:288      评论:0      收藏:0      [点我收藏+]

标签:


栅格Grid 

<!-行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中->

<div class="container">                       
    <div class="row">
        <div class="col-md-1">col-md-1</div>    <!-一行最多12列, col-xs, col-sm, col-md, col-lg四种格式->
    </div>
</div>
    

代码Code

<!-内联代码->   
For example, <code>&lt;section&gt;</code> should be wrapped as inline
<!-用户输入->
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
<!-代码块->
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
<!-变量->
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
<!-程序输出->
<samp>This text is meant to be treated as sample output from a computer program.</samp>

 


表格Table

<!-基本->
<table class="table">
.table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。
<!-条纹状表格-> .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。
<!-带边框表格-> .table-bordered 类为表格和其中的每个单元格增加边框。
<!-鼠标悬浮-> .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
<!-紧缩表格-> .table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半。

<!-响应式表格->
将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。


<!-状态类->
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作





  


表单Form

 

 


 

按钮Button

 

 


 

图片Image

 

 


 

Bootstrap学习 - 全局CSS样式

标签:

原文地址:http://www.cnblogs.com/roronoa-sqd/p/5399986.html

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