Web基础 ( 三 ) Bootstrap

3.Bootstarp

3.1.什么是Bootstrap

Bootstrap来自 Twitter，是目前最受欢迎的前端UI框架。

Bootstrap 是基于 HTML、CSS、JQuery 的，它简洁灵活，使得 Web 开发更加快捷。

主要特点是 整合HTML和CSS技术,提供了大量应用组件, 简化了响应式布局的实现

中文主站: https://www.bootcss.com/

3.2.环境搭建

注入引入资源的顺序

国内推荐使用 Staticfile CDN 上的库：

<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" > 
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

本地资源

<link  rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="../js/jquery-2.2.4.min.js" ></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>

3.3.响应式布局

Bootstrap 的网格系统（Grid System）,也叫栅格系统。将窗口分为最多12列

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的变化，系统会自动分配组件的位置及所占用及空间.

Bootstrap 的响应式尺寸分为五种，它们是：

1. 超小屏幕（Extra Small， xs）：小于576px的屏幕，如手机屏幕。
2. 小屏幕（Small，sm）：大于等于576px且小于768px的屏幕，如平板电脑。
3. 中等屏幕（Medium，md）：大于等于768px且小于992px的屏幕，如小型台式电脑。
4. 大屏幕（Large，lg）：大于等于992px且小于1200px的屏幕，如台式电脑。
5. 超大屏幕（Extra Large， xl）：大于等于1200px的屏幕，如大屏幕电视。

Bootstrap 的栅格系统能够很好地适应这些响应式尺寸，通过指定不同的 class，可以让网页在不同的屏幕大小下呈现不同的布局和样式。

例如，使用 col-xs-* 指定某个元素在超小屏幕下占据的栅格数，使用 col-sm-* 指定在小屏幕下占据的栅格数。

<div  class="col-xs-3  col-sm-7">1</div>

3.4.常用实例

3.4.1.按钮

 <button class="btn btn-primary">传统按钮</button>

按钮组, 多个按钮连在一起

<div class="btn-group">
    <button class="btn btn-danger">危险按钮</button>
    <button class="btn btn-primary">传统按钮</button>
    <button class="btn btn-default">基础按钮</button>	
</div>

3.4.2.默认的颜色值

danger 危险

primary 传统

default 基础

info 说明

warning 警告

success 成功

3.5.表单

<form role="form" class="form-horizontal  text-center">
	<div class="form-group">
		<label for="name" class="col-sm-2 control-label">名称:</label>
		<div class="col-sm-4">
			<input type="text" class="form-control" id="name1" placeholder="请输入名称">
		</div>
		<label for="name" class="col-sm-1 control-label">选择:</label>
		<div class="col-sm-4">
			<select name="" class="form-control">
				<option value="">aa</option>
				<option value="">bb</option>
			</select>
		</div>
	</div>
	<div class="form-group">
		<label for="name" class="col-sm-2 control-label">爱好:</label>
		<div class="col-sm-9   text-left">
			<div>
				<label class="checkbox-inline">
					<input type="checkbox">运动
				</label>
				<label class="checkbox-inline">
					<input type="checkbox">阅读
				</label>
				<label class="checkbox-inline">
					<input type="checkbox">音乐
				</label>
			</div>
		</div>
	</div>
	<div class="form-group">
		<label for="name" class="col-sm-2 control-label">性别:</label>
		<div class="col-sm-9   text-left">
			<div class="radio">
				<label>
					<input type="radio">男
				</label>
				<label>
					<input type="radio">女
				</label>
			</div>
		</div>
	</div>
	<div class="form-group">
		<label for="name" class="col-sm-2 control-label">文本框:</label>
		<div class="col-sm-9">
			<textarea class="form-control" rows="3" placeholder="必要时可以改变 rows 属性"></textarea>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-12 text-center">
			<button type="submit" class="btn btn-default">登录</button>
		</div>
	</div>
</form>