Bootstrap【第三章】表单&按钮&图片&辅助类&响应式工具

前言：上一章我们讲到了排版和表格，本章节我们在上一章的基础上继续讲全局CSS的样式，主要内容为表单、按钮、图片、辅助类、以及响应式工具。

一、表单

1.1、基本表单

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

代码示例：

            <form>
				<label>用户名：</label>
				<input type="text" class="form-control" />

				<label>简介：</label>
				<textarea class="form-control">
				</textarea>

				<label>地址：</label>
				<select class="form-control">
					<option>长沙</option>
				</select>
			</form>

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

代码示例：

            <form>
				<div class="form-group">
					<label>用户名：</label>
					<input type="text" class="form-control" placeholder="请输入用户名" />
				</div>
				<div class="form-group">
					<label>密码：</label>
					<input type="text" class="form-control" placeholder="请输入密码" />
				</div>
				<div class="form-group">
					<label>邮箱：</label>
					<input type="text" class="form-control" placeholder="请输入邮箱" />
				</div>
			</form>

效果图展示：1-1

---

1.2、内联表单

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

class=”form-inline”

1.3、表单组合

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

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

 1.4、水平排列表单

class=”form-horizontal” 表示水平

1.5、多选框 

注意：复选框的语法格式，需要把input标签放在label标签中。

            <!-- 禁选 -->
            <label class="checkbox checkbox-inline disabled">
                <input type="checkbox"  disabled="disabled"/>唱歌
            </label>

代码示例：

效果图展示： 1-2

---

1.6、下拉列表

用class=”form-control”（直接占满整行）

 1.7、控制尺寸(高度)

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

1.8、控制尺寸(宽度)

 <input type="text" class="col-lg-10"/>   表示文本框占10个格子

代码示例：

            <h3 class="mark">1.6 表单之下拉列表</h3>
			<select class="form-control">
				<option>北京</option>
				<option>上海</option>
				<option>深圳</option>
				<option>杭州</option>
				<option>广州</option>
			</select>

			<h3 class="mark">1.7 控制尺寸</h3>
			<!--控制高度有两种，lg最高，sm最低 -->
			<h4 class="mark">1.7.1 高度</h4>
			<input type="text" class="input-lg" />
			<input type="text"/>
			<input type="text" class="input-sm" />

			<h4 class="mark">1.7.2 宽度</h4>
			<input type="text" class="col-lg-10" />

效果图展示：1-3 

---

二、按钮 

 2.1、可用作按钮使用的标签和元素

可以用作按钮使用的标签元素有很多，a标签、button标签本身就是按钮，input标签的button,submit这些都可以用class=”btn”来添加按钮样式。

代码示例：

            <h3 class="mark">2.1 可用作按钮的标签和元素</h3>
			<a class="btn btn-warning">超链接按钮</a>
			<button class="btn btn-success" type="button">button标签按钮</button>
			<input class="btn btn-info" type="button" value="input标签按钮" />

			<h3 class="mark">2.2 按钮预定义样式</h3>
			<button class="btn btn-default">默认样式</button>
			<button class="btn btn-primary">首选项</button>
			<button class="btn btn-success">成功</button>
			<button class="btn btn-info">一般信息</button>
			<button class="btn btn-warning">警告信息</button>
			<button class="btn btn-danger">危险信息</button>
			<button class="btn btn-link">链接</button>

			<h3 class="mark">2.3 按钮尺寸</h3>
			<button class="btn btn-success">默认大小</button>
			<button class="btn btn-success btn-lg">大按钮</button>
			<button class="btn btn-success btn-sm">小按钮</button>
			<button class="btn btn-success btn-xs">超小按钮</button>
			<button class="btn btn-success btn-block">块级按钮</button>
			
			<h3 class="mark">2.4 激活状态</h3>
			<button class="btn btn-success active">青春</button>

			<h3 class="mark">2.5 禁用状态</h3>
			<button class="btn btn-success disabled">青春</button>

​​​​​2.2、预定义样式

给按钮设置不同的背景色

2.3、尺寸

btn-lg（大按钮）、btn-sm（小按钮）、btn-xs（超小按钮）、btn-block（块级按钮）

2.4、激活状态

<button class="btn btn-success active">青春</button>

​​​​​​​2.5、禁用状态（设置按钮不可用）

<button class="btn btn-success disabled">青春</button>

效果图展示：1-4

---

三、图片 

 ​​​​​​​3.1、图片形状、响应式图片

图片形状有三种：

1. 圆角矩形：<img class=”img-rounded”>
2. 圆形/椭圆：<img class=”img-circle”>会根据图片来决定是宽椭圆还是高椭圆。
3. 缩略图：<img class=”img-thumbnail”>根据分辨率的大小变化
4. 响应式图片：< img class="img-responsive">

响应式图片： 让图片根据网页缩小而自动缩小。

一般图片：缩小网页的时候图片好像不会跟着自动缩小，会被只显示一部分。

代码示例：

            <h3 class="mark">3.1 图片形状</h3>
			<!--圆角矩形：<img class=”img-rounded”>-->
			<img src="img/a.jpg" class="img-rounded" >
			
			<!--圆形/椭圆：<img class=”img-circle”>-->
			<img src="img/a.jpg" class="img-circle" >
			<img src="img/b.jpg" class="img-circle" >
			
			<!--缩略图：<img class=”img-thumbnail”>-->
			<img src="img/a.jpg" class="img-thumbnail" >

			<h3 class="mark">3.2 响应式图片</h3>
			<!-- 根据分辨率调整大小-->
			<img src="img/a.jpg" class="img-rounded img-responsive" />
			<img src="img/a.jpg" class="img-circle img-responsive" />
			<img src="img/a.jpg" class="img-thumbnail img-responsive" />

效果图展示：1-5 

---

四、 辅助类

​​​​​​​4.1、情境文本颜色(文字颜色)

            <h3 class="mark">4.1 文字颜色</h3>
			<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>

​​​​​​​4.2、情境背景色(背景颜色)

            <h3 class="mark">4.2 背景颜色</h3>
			<p class="bg-success">浔阳江头夜送客</p>
			<p class="bg-warning">枫叶荻花秋瑟瑟</p>
			<p class="bg-primary">主人下马客在船</p>
			<p class="bg-danger">举酒欲饮无管弦</p>
			<p class="bg-info">醉不成欢惨将别</p>

​​​​​​​4.3、关闭按钮class=”close”

            <!--关闭按钮class=”close”-->
			<span class="close">X</span>

​​​​​​​​​​​​​​4.4、三角符号class=”caret”​​​​​​​

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

4.5、快速浮动class=”pull-right”,class=”pull-left”

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

效果图展示：1-6 

---

五、响应式工具

当我们需要随着页面大小变化 想要隐藏一些元素的时候可以用响应式工具来实现

​​​​​​​5.1、可见：class=”visible-xs-*” *指的是block或者inline

            <h2>五、响应式工具</h2>
			<!--可见：class=”visible-xs-*” *指的是block或者inline-->
			<!--visible-sm：表示只有在页面变小才会显示这个按钮-->
			<button class="btn-danger visible-sm">丁达尔效应</button>
			<!--block：表示显示整行背景-->
			<p class="bg-danger visible-lg-block">质能方程</p>
			<!--inline:表示只在文本宽度显示背景色-->
			<p class="bg-danger visible-lg-inline">半衰期</p>

​​​​​​​5.2、隐藏：class=”hidden-xs”

            <!--隐藏：class=”hidden-xs”-->
			<!--hidden-lg：表示在大屏幕就隐藏-->
			<button class="btn-danger hidden-lg">榆林</button>

效果图展示：1-7 

 

 

over! ​​​​​​​