Bootstrap_03之全局CSS

一.表单

1.基本表单

1）class=”form-control”：可以给<input>、<textarea>、<select>元素设置宽度为100%

2）class=”form-group”：可以为<div>设置该属性。如果<div>中包含<label>和<input>表示为一组。层次会更清晰

2.内联表单：class=”form-inline”  

What？什么是内联表单呢？就是让我们的所有表单元素都在一行

 3.表单组合

class=”input-group”、class=”input-group-addon”

表单组合就是把几个元素组合在一起

4.多选框  

我们再来看一下Bootstrap中咋写: 

<div class="checkbox">

<label>

<input type="checkbox"/>吃饭

</label>

</div>

<div class="checkbox">

<label>

<input type="checkbox"/>睡觉

</label>

</div>

 现在每一个选项都加了div,选项竖着排列。如果我们现在想让多选框横着排列，来看看该咋写：

 <label class="checkbox checkbox-inline">

<input type="checkbox" />吃饭

</label>

<label class="checkbox checkbox-inline">

<input type="checkbox" />睡觉

</label>

我们只需把div去掉，在label中直接写:class=”checkbox checkbox-inline”这样就在一行了

禁选：

<label class="checkbox checkbox-inline disabled">

<input type="checkbox"  disabled="disabled"/>吃饭

</label>

如果是单选按钮：

<div class="radio">

<label>

<input type="radio"/>男

</label>

<label>

<input type="radio"/>女

</label>

</div>

只需要把checkbox改成radio就OK

 5.下拉列表

直接用class=”form-control”

<select class="form-control">

<option>湖南省</option>

<option>湖北省</option>

</select>

直接占满整行，顺便帮我们添加样式

7. 控制尺寸

<input type="text" class="input-lg" />

<input type="text"/>

<input type="text" class="input-sm" />

控制高度有两种，lg最高，sm最低

 

二.按钮

1.可用作按钮使用的标签和元素

<a class="btn btn-warning">超链接按钮</a><br>

<button class="btn btn-success" type="button">button标签按钮</button><br>

<input class="btn btn-info" type="button" value="input标签的button按钮"/><br>

<input class="btn btn-danger" type="submit" value="input标签的submit按钮"/>

input标签的button,submit这些都可以用class=”btn”来添加按钮样式

2.预定义样式

1） class="btn btn-primary"

2）class="btn btn-success"

3）class="btn btn-info"

4）class="btn btn-warning"

5）class="btn btn-danger"

6）class="btn btn-link"

前面六种基本就是给按钮设置不同的背景色，第七种是把按钮的样式修改为超链接

3.尺寸

1）默认大小：class="btn btn-success"

2）大按钮：class="btn btn-success btn-lg"

3）小按钮：class="btn btn-success btn-sm"

4）超小按钮：class="btn btn-success btn-xs"

5）块级按钮：class="btn btn-success btn-block"

4.激活状态

设置按钮颜色为激活状态的颜色：<button class="btn btn-success active">button标签按钮</button>

5.禁用状态

设置按钮不可用：<button class="btn btn-success active">button标签按钮</button>

三.图片

1.图片形状、响应式图片

1）圆角矩形：<img src="img/a.jpg" class="img-rounded" >

2）圆形/椭圆：<img src="img/a.jpg" class="img-circle" >（这个会根据图片来决定是宽还是高）

3）缩略图：<img src="img/a.jpg" class="img-thumbnail" >

4）响应式图片：img-responsive（让图片根据网页缩小而自动缩小）

四.辅助类

1.情境文本颜色(文字颜色：六种)

<p class="text-muted">男儿事长征</p>

<p class="text-primary">少小幽燕客</p>

<p class="text-success">赌胜马蹄下</p>

<p class="text-info">由来轻七尺</p>

<p class="text-warning">杀人莫敢前</p>

<p class="text-danger">须如猬毛磔</p>

2.情境背景色(背景颜色：五种)

<p class="bg-info">黄云陇底白云飞</p>

<p class="bg-danger">未得报恩不得归</p>

<p class="bg-primary">辽东小妇年十五</p>

<p class="bg-warning">惯弹琵琶解歌舞</p>

<p class="bg-success">今为羌笛出塞声</p>

3.​​​​​​​关闭按钮：class=”close”

<span class="close">×</span>（×表示X）

4.​​​​​​​三角符号：class=”caret”

<span class="caret"></span>

5.​​​​​​​快速浮动：class=”pull-right”,class=”pull-left”

<div style="width: 200px; height: 200px; background-color: yellow;" class="pull-right">

</div>（类似CSS样式中float的左浮动 右浮动）

五.响应式工具

1.​​​​​​​可见：class=”visible-xs-（* ” *指的是block或者inline）

1）visible-sm：表示只有在页面变小才会显示这个按钮

2）block：表示显示整行背景

3）inline:表示只在文本宽度显示背景色

2.​​​​​​​隐藏：class=”hidden-xs”

hidden-lg：表示在大屏幕就隐藏

<button class="btn-danger hidden-lg">手机用户，点击有惊喜</button>

---

我希望有个如你一般的人，如山间清爽的风，如古城温暖的光，从清晨到傍晚，从山野到书房。一切都没有关系，只要最后是你，就好。