Bootstrap Mind Map
Introduction to Bootstrap
1. From Twitter, it is currently the most popular front-end framework
2. It is a concise and flexible open source framework based on HTMl, CSS, javascript, which is easy for people to get started at any time
3. The current version V3
Reasons for the popularity of bootstrap
1. Quickly create responsive web pages to adapt to various terminals
2. Simple and convenient development
3. Mobile first
4. Code open source
5. Good code is standard
1. Support Internet Exporer 8-11
2. Development environment (webstorm)
3. Introduce Bootstrap framework files
3.1 Compress and process files bootstrap.min.css
bootstrap.min.js
3.2 Use the free CDN acceleration service provided by bootstrap Chinese website
basic template
<html>
<head lang="en">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0"/>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<h1>这是一个Bootstrap框架的最基本HTML模板</h1>
<script scr="js/jquery-1.12.4.js"></script>
<script scr="js/bootstrap.js"></script>
</body>
</html>
boostrap architecture
grid system
1. The grid system creates the layout of the page through the combination of a series (row) and column (column). The content of the setting can be placed
in these created layouts . 12 copies 2.2 Adjust inner and outer margins 2.3 Combine media queries
The use of the grid system
1. Column combination
<div class="container">
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>
2. Column Offset
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-8</div>
<div class="col-md-4 col-md-offset-4">.col-md-4.col-md-offset-4</div>
</div>
</div>
3. Column nesting
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="row">
<div calss="col-md-6"></div>
<div calss="col-md-6"></div>
</div>
</div>
<div class="col-md-3></div>
</div>
</div>
4. Column sorting
<div class="row">
<div class="col-md-9 col-md-push"></div>
<div class="col-md-3 col-md-pull-9></div>
</div>
CSS global styles
1. Also known as CSS layout
2. It is the basis of the three core contents of Bootstrap, that is, the basic layout syntax
3. Including
3.1 Basic typography (Typograhy)
3.2 Form (Form)
3.3 Buttons (Buttons)
3.4 Images (images)
1. Title
<h1><h2><h3><h4><h5><h6>
2.页面主体
特别强调的锻炼标签
<p class="lead"></p>
3.强调文体
文本强调元素：small,strong,em
对齐方式
<p class="text-left">左对齐</p>
<p class="text-center">左对齐</p>
<p class="text-right">左对齐</p>
<p class="text-justify">左对齐</p>
4. List
<ul class="list-inline">
<dl class="dl-horizontal">
<dt>111</dt>
<dd>111111</dd>
<dt>111</dt>
<dd>111111</dd>
<dt>111</dt>
<dd>111111</dd>
</dl>
</ul>
form
<form action="#">
<div class="form-group">
姓名：<input class="form-control" type="text"/>
</div>
<div class="form-group">
邮箱：<input class="form-control" type="text"/>
</div>
<input class="form-control" type="submit" 提交/>
</form>
inline form
<form action="#" class="form-inline">
<!--省略部分HTML代码-->
</form>
landscape form
<form action="#" class="form-horizontal">
<div class="form-group">
<span class="col-sm-2 text-center">姓名：<span>
<div class="cot-sm-10">
<input class="form-control" type="text" placeholder="请输入你的名字">
</div>
</div>
</form>
Verify Prompt Status
1.has-warning warning (yellow)
2.has-error error (red)
3.has-success success (green)
control size
1.大题输入框
2.小型输入框
<input type="text" class="input-lg form-control" placeholder="大型输入框">
<input type="text" class="form-contorl" placeholder="正常输入框"/>
<input type="text" class="input-sm form-control placeholder="小型输入框"/>
button
<input type="button" class="btn btn-default" value="default(灰色)"/>
<input type="button" class="btn btn-default btn-lg value="default (灰色)大型"/ >
<input type="button" class="btn btn-primary " value="primary(深蓝色)默认大小"/ >
<input type="button" class="btn btn-success btn-sm" value="success(绿色)小型"/>
<input type="button" calss="btn btn-info btn-xs" value="info(天蓝色)超小型"/>
picture
响应式图片
<img scr="..." class="img-responsive"/>
图片形状
<img src="image/1.jpg" class="img-rounded" alt=""/>
<img src="image/1.jpg" class="img-circle" alt=""/>
<img src="image/1.jpg" class="img-thumbnail" alt=""/>
Note:
When using img-circle to make a circular picture, you must ensure that the picture is a square, whether the picture will become a circle shape