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、排版

#主标题
~
  #同等效果是
demo

#副标题
 #应用为:
主标题副标题


#段落正文内容
段落

#强调段落内容
 段落 

#粗体
 粗体 
  #另外一种用法是

#斜体
  或者

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

#文本对齐风格 #使用方法
左对齐
.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
.text-justify：两端对齐

#无序列表和有序列表
无序列表

  
…

有序列表
  #ordered list 
  
…


#有序和无序列表去掉相应的前置符号



#把垂直列表转换成水平列表
水平列表

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

#代码太多，显示滚动条，使用下面的类
code
 
 
3、表单
 
 
#设置基本表单
设置class="form-control"  #设置了class之后，placeholder（占位符）

#默认是垂直表单，这里设置水平表单


#所有表单在一行内显示


#设置表单input,必须设置type，同时设置class="form-control"


#选择下拉框
 #单选
 #复选

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


#复选框

  
    
      记住密码
  


#单选框

  
    
      喜欢
  



  
    
      不喜欢
    

1、不管是checkbox还是radio都使用label包起来了
2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
3、radio连同label标签放置在一个名为“.radio”的容器内

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

#表单禁用状态


#按钮
基础按钮.btn

#使用图标


 
 
4、网格系统
 原理
 
 
 
 
 
  
 
   
 
     
   
 
  
 
  

    网格结构原理 
  
 
 
 
 
#网格结构

  

    
.col-md-4
    
.col-md-8
  


#进行偏移
列向右移动四列的间距