初识前端--BootStrap基础

布局 > 行 > 栅格
数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距
(padding)。
在行(.row)中可以添加列(.column), 只有列（column）才可以作为行容器(.row)的直接子元素，但列数之和不能超过平分的总列数，比如 12。如果大于 12,则自动换到下一行
列中可以继续嵌套行

col-md-*

xs：超小屏
sm：小屏
md：中屏
lg：大屏
*：占格子的数量

<div class="container">
	<div class="row">
		<div class="col-md-4">4 列</div>
		<div class="col-md-8">8 列</div>
	</div>
</div>

列的组合

<div class="container">
	<div class="row">
		<div class="col-md-4">4 列</div>
		<div class="col-md-8">8 列</div>
	</div>
	<div class="row">
		<div class="col-md-2">2 列</div>
		<div class="col-md-10">10 列</div>
	</div>
</div>

列的偏移

将相邻元素隔开

col-md-offset-*

列的排序

左右浮动

col-md-push-*：向左/向后偏移，原位置会被占住，但是实际展示的位置向后推
和“col-md-pull-*：向右/向前偏移，原位置会被占住，但是实际展示的位置向前推

常用样式

BootStrap提供了常用标签的简单美化后的效果，部分标签直接覆盖了原标签，可以直接使用
同时部分元素也提供了补充标签和样式

标题

h1~h6的原始样式均被覆盖，直接调用则直接使用BootStrap样式

补充样式

small：副标题用

补充说明
BootStrap同时提供 .h1~.h6以及 .small

段落

普通标签被直接覆盖
提供 .lead来做强调

补充样式

small：小号
b/strong：加粗
i/em：斜体

引用

blockquote：标签定义摘自另一个源的块引用
- 使用.blockquote-reverse，实现右对齐。
footer:脚注
cite：表示对某个参考文献的引用

强调

定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强调

.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）

文本对齐

CSS中使用text-align来对齐文本，BS中有相似用法

.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
.text-justify：两端对齐

列表

bootstrap 根据平时的使用情形提供了六种形式的列表：( 普通列表、有序列表、去点列表、内联列表、描述列表、水平描述列表）
和原生标签相比，最常用的是去点列表和内联列表

.list-unstyled：去点列表
list-inline：内联列表，将竖直的列表展示改变为水平展示，去除其头部的符号和编号，可用于横向导航栏

代码块

code：显示单行代码
pre：保持源代码（HTML文件中）的代码样式和缩进等
kbd：以黑色反色显示，多用于前端提醒用户使用的快捷键

注意：如果遇到>和< 需要用实体字符& gt;和& lt;表示

表格

table

.table：基础表格

附加样式

.table-striped：斑马线表格
.table-bordered：带边框的表格
.table-hover：鼠标悬停高亮的表格
. table-condensed：紧凑型表格，单元格没内距或者内距较其他表格的内距小

tr

提供了5中不同的样式，用来展示不同的颜色

active：表示当前活动，
success：表示成功或正确
info：表示信息
warning：表示警告
danger：表示危险或错误

表单样式

表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等

通用样式
.form-control .input-lg（较大） .input-sm（较小）

表单整体

.form-horizontal：水平展示表单
- 步骤
  - 向父元素添加 class .form-horizontal
  - 把标签和控件放在一个带有 class .form-group 的 < div> 中
  - 向标签添加 class .control-label

<form class="form-horizontal">
	<div class="form-group">
		<label for="email" class="control-label col-sm-2">邮箱</label>
		<div class="col-sm-10">
			<input type="email" class="form-control" placeholder="请输入邮箱"/>
		</div>
	</div>
	<div class="form-group">
		<label for="pwd" class="control-label col-sm-2">密码</label>
		<div class="col-sm-10">
			<input type="pwd" class="form-control" placeholder="请输入密码" />
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2">
			<div class=" checkbox">
			<label>
			<input type="checkbox" />记住密码
			</label>
			</div>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<button class="btn btn-default">提交</button>
		</div>
	</div>
</form>

. form-inline：内联表单，将表单的控件都在一行内显示
注意 label 不会显示，存在的意义：如果没有为输入控件设置 label 标签，屏幕阅读器将无法正确识别

<form class="form-inline">
	<div class="form-group">
		<label for="email" >邮箱</label>
		<input type="email" class="form-control" placeholder="请输入邮箱"/>
	</div>
	<div class="form-group">
		<label for="pwd" >密码</label>
		<input type="pwd" class="form-control" placeholder="请输入密码" />
	</div>
	<div class="form-group checkbox">
		<label><input type="checkbox" />记住密码</label>
	</div>
	<div class="form-group">
		<button class="btn btn-default">提交</button>
	</div>
</form>

输入框

.form-contr

下拉选择框 select

多行选择设置：multiple=“multiple”

文本域 textarea

<textarea class="form-control" rows="3"></textarea>

复选框 checkbox

.checkbox
.checkbox-inline：水平显示

单选择 radio

.radio
.radio-inline：水平显示

按钮 button

基础样式

.btn

附加样式
通过不同的颜色来做不同的强调

.btn-primary
.btn-info
.btn-success
.btn-warning
.btn-danger
.btn-link
.btn-default

其他类型的标签转为按钮标签使用

多标签支持:使用 a div 等制作按钮

//提交按钮
<input type="submit" class="btn btn-default" value="input 标签按钮"/>
//超链接
<a href="##" class="btn btn-info">a 标签按钮</a>
//span元素
<span class="btn btn-success">span 标签按钮</span>
//块级元素
<div class="btn btn-warning">div 标签按钮</div>

按钮大小

.btn-lg：最大的
.btn-sm：中间尺寸
.btn-xs：最小的

按钮禁用

在标签中添加 disabled 属性
在元素标签中添加类名“disabled”，但是只是样式上禁用，仍可以点击

缩略图

可用于展示商品等
. thumbnail

面板

默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。

.panel-default：默认样式
.panel-heading：面板头
.panel-body：面板主体内容

常用插件、组件

上面的那些会就写点，不会就直接抄下面的就行
Bootstrap 教程 | 菜鸟教程

下拉菜单
导航栏
面包屑导航
页面标题
提示框
模态框
轮播图
按钮组
折叠

上一篇：上海排名第一的生煎是谁

下一篇：南邮微机实验1

初识前端--BootStrap基础