Bootstrap学习 - 全局CSS样式

---

栅格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

<form role="form">
        <div class="form-group">
            <label class="sr-only">Name</label>     label标签不能少，可以添加.sr-only隐藏文字
            <input type="text" class="form-control" placeholder="Enter your name" />
        </div>
        <div>
            <label class="sr-only">Email</label>
            <input type="email" class="form-control" placeholder="Enter your Email" />
        </div>
</form>

<form role="form" class="form-horizontal">   水平表单
    <div class="form-group">
        <label class="col-sm-2 control-label">Email</label>   可以通过栅格系统的col-sm-*即col-sm-offset-*来对齐
        <div class="col-sm-10">
            <input type="email" placeholder="Email" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password" placeholder="Password" />
        </div>
    </div>
　　<div class="from-group">
    　　<div class="col-sm-offset-2 col-sm-10">
       　　 <div class="checkbox">                //复选框   .checkbox-inline  内联显示
            　　<label>
              　　  <input type="checkbox" />Remember me
           　　 </label>
       　　 </div>
  　　  </div>
　　</div>

　　
　　<div class="radio">     //单选框  .radio-inline
　　　　<label>
　　　　　　<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 选项
　　　　</label>
　　</div>
　　<div class="radio">
　　　　<label>
　　　　　　<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">选项  - 选择它将会取消选择选项
　　　　</label>
　　</div>
    <div class="form-group">
        <label >文本域</label>
        <textarea class="form-control" rows=""></textarea>
    </div>
　　
　　<div class="form-group">
      <label for="name">选择列表</label>
      <select class="form-control">    //下拉列表     //   <select multiple class="form-control">  多选列表
         <option></option>
         <option></option>
         <option></option>
         <option></option>
         <option></option>
      </select>
　　 <p class="form-control-static">[e-mail]</p>    //静态控件
</form>

　　

---

按钮Button

<button type="button" class="btn btn-default ">按钮</button>

其他样式：.btn-primary  .btn-success .btn-info  .btn-warning  .btn-danger .btn-link

大小：.btn-lg  .btn-sm  .btn-xs

状态：.active  .btn-block  .btn-disabled

也可以把其他标签样式变成按钮状，只要为其添加class="btn btn-default"等，只是改变样式，不改变该标签的功能。但是不建议这样使用，可能存在浏览器兼容问题。
<a class="btn btn-primary" href="#">a-button</a>
<input class="btn btn-default" type="submit" value="Submit"/>

---

图片Image

直接为<img>标签添加以下类即可
img-circle  椭圆
img-rounded 圆角
img-thumbnail 缩略图
img-responsieve 响应式

---