Boostrap3.0学习笔记

网址：https://www.bootcss.com/

一、引用：

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

对手机友好：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

二、全局CSS样式

1、栅格系统

		（1）容器：class="container"
		（2）行：	class="row"
		（3）建议使用：	class="col-md-4"

		<div class="container">
			<div id="" class="row">
				<div class="col-md-4">
					<img src="img/banner1.jpg" width="100%"/>
				</div>
				<div class="col-md-4">
					<img src="img/banner1.jpg" width="100%"/>
				</div>
				<div class="col-md-4">
					<img src="img/banner1.jpg" width="100%"/>
				</div>	
			</div>
		</div>

		（4）向右侧偏移	class="col-md-10 col-md-offset-1"

			<div id="" class="row">
				<div class="col-md-4">
					<img src="img/banner1.jpg" width="100%"/>
				</div>
				<div class="col-md-4 col-md-offset-4">
					<img src="img/banner1.jpg" width="100%"/>
				</div>	
			</div>

		（5）后移	class="col-md-4 col-md-push-4"
				 前移 	class="col-md-4 col-md-pull-4"

			<div id="" class="row">
				<div class="col-md-4">
					<img src="img/banner1.jpg" width="100%"/>
				</div>
				<div class="col-md-4 col-md-push-4">
					<img src="img/banner1.jpg" width="100%"/>
				</div>	
			</div>

		（6）左右浮动：	class="col-md-4 pull-right"		class="col-md-4 pull-left"
				清除浮动：	<div class="clearfix">...</div>

2、排版

		（1）标题
		（2）页面主体
				重设置了<p>标签
		（3）mark标记

		<mark>highlight</mark>

		（4）删除线

		<del>This line of text is meant to be treated as deleted text.</del>

		（5）无用文本

		<s>This line of text is meant to be treated as no longer accurate.</s>

		（6）下划线

<ins>This line of text</ins>
<u>This line of text will render as underlined</u>

		（7）小号文本

<small>This line of text is meant to be treated as fine print.</small>

		（8）文本对齐

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

		（9）大小写

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

		（10）无样式列表

<ul class="list-unstyled">
  <li>...</li>
</ul>

		（11）内联列表

<ul class="list-inline">
  <li>...</li>
</ul>

		（12）自定义列表/水平自定义列表

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

//水平
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

代码

表格

		（1）响应式表格（自动显示滚动条）

				<div class="table-responsive">
					<table>...
				</div>

按钮

		（1）可作为button的元素

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

图片

		（1）让图片支持响应式布局

<img src="img/banner1.jpg"  class="img-responsive" />

		（2）形状

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

辅助类

		（1）文本颜色

<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>

		（2）背景颜色

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

		（3）关闭x 

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

		（4）三角符号（一般放在button中）

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

		（5）块居中

<div class="center-block">...</div>

		（6）显示或隐藏

<div class="show">...</div>
<div class="hidden">...</div>

响应式工具

	图片和表格-见上

组件

图标

		（1）<span class="glyphicon glyphicon-flag"></span>
		（2）可以自由放大缩小，设置字体；
		（3）设置颜色

<span class="glyphicon glyphicon-flag text-primary"></span>

下拉菜单

		（1）示例

<div class="dropup">
				<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    				更多
    				<span class="caret"></span>
  				</button>
				<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
					<li>
						<a href="#">Action</a>
					</li>
					<li>
						<a href="#">Another action</a>
					</li>
					<li>
						<a href="#">Something else here</a>
					</li>
					<li role="separator" class="divider"></li>
					<li>
						<a href="#">Separated link</a>
					</li>
				</ul>
			</div>

		（2）上拉：<div class="dropup">
				 下拉：<div class="dropdown">
		（3）右对齐

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

		（4）标题

  <li class="dropdown-header">Dropdown header</li>

		（5）分割线

  <li role="separator" class="divider"></li>

		（6）禁用

  <li class="disabled"><a href="#">Disabled link</a></li>

按钮组

		（1）实例

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

		（2）分组

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

		（3）尺寸

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

输入

		（1）基本使用

				<form action="">
					<div class="input-group">
						<span >用户名</span>
						<input type="text" class="form-control" />
					</div>
				</form>```
	（2）控制大小
			

```bash
				<div class="input-group input-group-lg">

		（3）