Bootstrap_03_(全局CSS之表单&按钮&图片&辅助类&响应式工具)

目录

一、表单

1.基本表单

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

3.表单组合：class=”input-group”、class=”input-group-addon”

4.多选框 ：class="checkbox"

5.下拉列表：class=”form-control”

6. 控制尺寸

二.按钮

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

2.预定义样式

3.尺寸

4.激活状态

5.禁用状态

三.图片

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

四.辅助类

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

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

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

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

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

五.响应式工具

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

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

---

一、表单

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.多选框 ：class="checkbox"

我们再来看一下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”

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

<input type="text"/>

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

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

6. 控制尺寸

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

<input type="text"/>

<input type="text