Bootstrap笔记（二）

一、栅格布局

二、表单样式

三、字体图标：图标的class在http://w3c.3306.biz/bootstrap/e

g/bootstrap--glyphicons-list.html里查找配合span即可使用

四、下拉菜单

五、轮播

一、栅格布局

将当前标签（容器）布局按表格进行分割，行数不限，总共有12列（12个单位长度）。

1、基本类

row 设置一行

col-md-n 设置当前标签占据n个单位长度（n取值范围1-12）

2、栅格参数（实现响应式布局，即在不同分辨率如手机，平板上也可达到相同效果）

col-xs-n    设置手机当前占据n个单位长度（n取值范围1-12）(<768px)

col-sm-n   设置平板当前占据n个单位长度（n取值范围1-12）(≥768px)

col-md-n   设置电脑当前占据n个单位长度（n取值范围1-12）(≥992px)

col-lg-n 设置大桌面显示器当前占据n个单位长度（n取值范围1-12）(≥1200px)

3、列偏移和列嵌套

col-md-offset-n 设置电脑偏移n个单位长度

col-sm-n 在列里面再嵌套一个栅格布局（包含行和列），行仍使用row的class属性，列需要使用col-sm-n来表示列的单位个数。

取值范围不能超过剩下的单位长度（即12-前面已使用的单位长度）

二、表单样式

1、补充label标签知识：

for 属性规定 label 与哪个表单元素绑定。实现点击关联字光标在关联输入框闪烁。
显式的联系：
<label for="SSN">SNumber:</label>
<input type="text" name="SNum" id="SSN" />
隐式的联系：
<label>Date: <input type="text" name="Date" /></label>
第一个标记是以显式形式将文本 "SNumber:" 和表单的社会安全号码的文本输入控件 ("SNum") 联系起来，它的 for 属性的值和控件的 id 一样，都是 SSN。
第二个标记 ("Date:") 不需要 for 属性，它的相关控件也不需要 id 属性，它们是通过在 <label> 标签中放入 <input> 标签来隐式地连接起来的。

2、设置表单（每个输入项一定要设置label）：每个表单标签<form>里设置form-horizontal类使得当前表单使用栅栏布局

form-horizontal   水平表单（在form标签内使用）

form-group 表单组（即当前标签是一个表单行），此时当前div标签默认为一行row，不用在设置row
form-control 设置<input>、<textarea>、<select>元素为宽度100%的圆角边框
placeholder="请输入名称" ：与class一样的独立属性，显示提示性文本

form-group
control-label 自动设置label标签的格式
form-control 自动设置输入项的格式

form-inline 内联表单，表单里的标签是并排的
sr-only   隐藏label

三、字体图标：图标的class在http://w3c.3306.biz/bootstrap/e

g/bootstrap--glyphicons-list.html里查找配合span即可使用

        <span class="图标的class（glyphicon glyphicon-asterisk）"></span>

三角图标 caret

四、下拉菜单

整个下拉菜单包含在一个div中：使用class属性 ------dropdown

触发下拉选项的属性data-toggle，与class一样属于html标签属性 ------data-toggle="dropdown"

下拉选项：使用class属性 ------dropdown-menu

案例：

	<div class="dropdown">
		<button class="btn btn-primary" data-toggle="dropdown">
			主题<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li>
				<a href="#">Java</a>
			</li>
			<li>
				<a href="#">数据挖掘</a>
			</li>
			<li>
				<a href="#">数据通信/网络</a>
			</li>
			<li class="divider"></li>
			<li>
				<a href="#">分离的链接</a>
			</li>
		</ul>
	</div>

五、轮播

<!--轮播部分
    -->
<div id="demo" class="carousel slide" data-ride="carousel">
		<div id="myCarousel" class="carousel slide">
			<!-- 轮播（Carousel）指标 -->
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
			</ol>   
			<!-- 轮播（Carousel）项目 -->
			<div class="carousel-inner">
				<div class="item active">
					<a href="novel1.html" target="_blank">
						<img src="images/novel.jpg" alt="First slide">
					</a>
				</div>
				<div class="item">
					<a href="computer.html" target="_blank">
					<img src="images/8.jpg" alt="Second slide">
					</a>
				</div>
				<div class="item">
					<a href="#" target="_blank">
					<img src="images/mountain.jpg" alt="Third slide">
					</a>
				</div>
			</div>
			<!-- 轮播（Carousel）导航 -->
			<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
	</div>

来源：https://blog.csdn.net/qq_38487155/article/details/82813860

标签

bootstrap表单

label