What is Bootstrap
Bootstrap is a front-end development framework from Twitter. Its flexible profile makes web development faster.
Advantages of bootstrap
- A lot of css styles and js plugins are defined. Our developers can directly use these styles and plug-ins to get rich page effects.
- Responsive layout, the same page can be compatible with devices of different resolutions.
The response is the layout
The same set of pages can be compatible with devices of different resolutions.
achieve
Depend on grid system: divide a row into 12 grids equally, and you can specify how many grids the element occupies
How to achieve response is layout
- Define the container. It is equivalent to the previous table and
container classification:
1) container: leave blank on both sides
2) container-fluid: each device is 100% wide - Define the line. Equivalent to the previous tr style: row
- Define the element. Specify the number of grids occupied by this element on different devices. Style: col-device code-number of grids
* device code:
1) xs: ultra-small screen mobile phone (<768px): col-xs-12
2) sm: small screen tablet (≥768px)
3) md: medium screen desktop display (≥992px)
4) lg: large screen and large desktop display (≥1200px)
Notes:
1. If the number of grids in a row exceeds 12, the excess part will wrap automatically.
2. The raster attributes can be upwardly compatible. The grid class is suitable for devices whose screen width is greater than or equal to the size of the dividing point.
3. If the width of the real device is smaller than the minimum value of the device code for setting the raster attribute, one element will be covered with a whole line.
CSS styles and JS plugins
Global CSS style:
Button:
need to add class="btn btn-default" to the label
<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">
image:
- class="img-responsive": The image occupies 100% of the
image shape in any size
<img src="img/banner_1.jpg" class="img-responsive"/>: 响应式 占100%
<img src="..." alt="..." class="img-rounded">：方形
<img src="..." alt="..." class="img-circle"> ： 圆形
<img src="..." alt="..." class="img-thumbnail"> ：相框
form
table //加入table后变成表格
table-bordered // 加入后显示边框
table-hover // 加入后鼠标悬停则背景色则发生变化
Form
Add to the form item: class="form-control"
Component
- Navigation bar
For the bootstrap navigation bar, you need to remember that there will not be deleted there.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<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>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<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>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Other example codes can be viewed on the official website: bootstrap navigation bar example
- Paging
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Plug-in
Carousel
bootstrap use
- Download Bootstrap
- Copy these three folders in the project
- Create html page and introduce necessary resource files
Use Cases
Import relevant documents and display
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap HelloWorld</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>hello world!!!</h1>
</body>
</html>