Bootstrap

1.rails中使用bootstrap

#gemfile中添加gem
gem 'bootstrap-sass'

#修改文件application.css为application.scss
#如上文件中，添加如下代码，这两行代码会引入bootstrap框架
@import "bootstrap-sprockets";
@import "bootstrap";

#下拉框生效
#application.js中引入bootstrap的javascript库
//= require bootstrap

2、排版

#主标题
<h1>~<h6>  #同等效果是<div class="h1">demo</div>

#副标题
<small> #应用为:<h1>主标题<small>副标题</small><h1>

#段落正文内容
<p>段落</p>

#强调段落内容
<p class="lead"> 段落 </p>

#粗体
<p> <strong>粗体</strong> </p>  #另外一种用法是<b>

#斜体
<em>  或者<i>

#强调相关的类  #使用方法<div class="text-muted">灰色</div>
text-muted：提示，使用浅灰色
.text-primary：主要，使用蓝色
.text-success：成功，使用浅绿色
.text-info：通知信息，使用浅蓝色
.text-warning：警告，使用黄色
.text-danger：危险，使用褐色

#文本对齐风格 #使用方法<p class="text-left">左对齐</p>
.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
.text-justify：两端对齐

#无序列表和有序列表
无序列表
<ul>
  <li>…</li>
</ul>
有序列表
<ol>  #ordered list 
  <li>…</li>
</ol>

#有序和无序列表去掉相应的前置符号
<ul class="list-unstyled"></ul>
<ol class="list-unstyled"></ol>

#把垂直列表转换成水平列表
<ul class="list-inline">水平列表</ul>

#代码
<code>：一般是针对于单个单词或单个句子的代码
<pre>：一般是针对于多行代码（也就是成块的代码）
<kbd>： 一般是表示用户要通过键盘输入的内容

#代码太多，显示滚动条，使用下面的类
<pre class="pre-scrollable">code</pre>

3、表单

#设置基本表单
设置class="form-control"  #设置了class之后，placeholder（占位符）

#默认是垂直表单，这里设置水平表单
<form><class="form-horizontal"></form>

#所有表单在一行内显示
<form><class="form-inline"></form>

#设置表单input,必须设置type，同时设置class="form-control"
<input type="email" class="form-control" placeholder="Enter email">

#选择下拉框
<select class="form-control"> #单选
<select multiple class="form-control"> #复选

#使用textarea
<textarea class="form-control" rows="3" clos="4"></textarea> #默认的cols是100%
#如果设置cols,需要去除class="form-control"属性
<textarea clos="3" rows="3" clos="4"></textarea>

#复选框
<div class="checkbox">
  <label>
    <input type="checkbox" value="">
      记住密码
  </label>
</div>

#单选框
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
      喜欢
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
      不喜欢
    </label>
</div>
1、不管是checkbox还是radio都使用label包起来了
2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
3、radio连同label标签放置在一个名为“.radio”的容器内

#复选框和单选按钮水平排列
1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”

#表单禁用状态
<input class="form-control " type="text" placeholder="表单已被禁用，不可输入" disabled>

#按钮
<button class="btn" type="button">基础按钮.btn</button>

#使用图标
<span class="glyphicon glyphicon-search"></span>

4、网格系统
原理

网格结构原理

#网格结构
<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">.col-md-8</div>
  </div>
<div>

#进行偏移
<div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>