Table of contents
1. How to use the BootStrap framework
2. BootStrap grid-responsive layout
foreword
Record your own process of learning the front end. The time is short, and the amount of code is relatively large, and the screenshots of all the running results have not been uploaded. If there are any deficiencies, please add them.
1. Introduction to Bootstrap
BootStrap is a framework launched by Twitter based on HTML, CSS, and JavaScript .
BootStrap has the advantages of flexibility, intuition, simplicity, etc., making Web development faster.
If you need it, you can use the following address to download BootStrap: https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip
2. Use steps
1. How to use the BootStrap framework
After the download is complete, there will be three folders css, fonts, js, we need to use the following code to call, "bootstrap.min.css" (compressed version) in css and bootstrap.min under the js folder. js. Since bootstrap is based on jquery, jquery must be introduced before "bootstrap.min.js" is introduced. And js and jquery should be placed at the bottom of the body.
ps: It is best to put the downloaded file in the current working folder, so that it can be called directly by the following code, and the order should not be changed. If it is not in the current folder, you can use ../ to return to the previous one level to find the file call.
<head>
<link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>2. Bootstrap Grid - Responsive Layout
2.1 Rely on the grid system: Divide a line into 12 grids on average, and you can specify how many grids the element occupies. We generally use desktop computers, so use the " col-md- *" statement.
| grid style | describe |
| col-lg-* | large Large devices (large desktop computers, starting at 1200px |
| col-md-* | middle Medium devices (desktops, starting at 992px) |
| col-sm-* | small Small devices (tablets, starting at 768px) |
| col-xs-* | x-small Ultra small devices (mobile phones, smaller than 768px) |
<div class="container">
<div class="row">
<div class="col-md-3">3</div>
<div class="col-md-4">4</div>
<div class="col-md-5">5</div>
</div>
</div>2.2.1 Common styles and labels of BootStrap
| style | describe |
| .container | Center the element horizontally within the container |
| .col-md-4 | how many grids |
| .col-md-offset-4 | Leave a few grids on the left |
| .col-md-push-8 | Float several grids to the right |
| col-md-pull-2 | float a few grids to the left |
<div class="container">
<!-- 网格偏移：右侧兄弟元素会被向右推移，但不会被覆盖-->
<!-- 将该元素位置向右偏移2个位置，总占据3个格栅-->
<div class="col-md-1 col-md-offset-2">1</div>
<!-- 网格排序：右侧兄弟元素不会被推移，可能会被兄弟元素覆盖-->
<!-- 将该元素位置向右偏移3个位置，只占据1个位置，可能会被兄弟元素覆盖-->
<!-- push：向右浮动，pull：向左浮动-->
<div class="col-md-1 col-md-push-3" style="background-color: red;">1</div>
</div> 2.2.2 Column nesting
It is best to add a row for column nesting, so that the padding value of the parent element can be canceled, and it is the same height as the parent element
<div class="col-md-6" style="border: 0;">
<div class="row" style="border: 0;">
<!-- 被嵌套的行又会再分出12个格栅-->
<div class="col-md-4" >子4</div>
<div class="col-md-4" >子4</div>
<div class="col-md-4" >子4</div>
</div>
</div> 
3. Common components of BootStrap
3.1 Button component
Syntax: <input type=button class="btn" value="This is a button">
<div class="container">
<!-- 按钮样式-->
<button class="btn">无样式按钮</button>
<button class="btn btn-default">默认样式按钮</button>
<button class="btn btn-info">info按钮</button>
<button class="btn btn-warning">warn按钮</button>
<button class="btn btn-danger">danger按钮</button>
<button class="btn btn-primary">标准按钮</button>
<button class="btn btn-link">link按钮</button>
</div>3.2 Panel Assembly
Panel components can be accessed via
1.panel provides basic borders and interiors to contain content
2.panel-headingCan simply add a header container.
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
面板标题
</div>
<div class="panel-body">
面板内容
</div>
</div>
</div>3.3 Navigation
3.3.1 A navbar is a responsive meta component that acts as a navigation header in your app or website. They are collapsible (and openable and closeable) on mobile devices, and change to horizontally expanded mode as the available viewport width increases.
The navigation components in Bootstrap all rely on the same .nav class, and the state class is also shared. Changing the modifier class can change the style.
Tab instance
ps .nav-tabs class depends on .nav base class
<div class="container">
<!--导航条-->
<div class="navbar navbar-default" role="navigation">
<!--折叠显示按钮，当横向分辨率不够显示时则显示当前折叠导航-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<!--折叠按钮上面的3条短线，好看的-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--默认链接，不会折叠-->
<a class="navbar-brand" href="#">Brand</a>
</div>
<!--当分辨率足够显示时，显示当前导航-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">新闻</a></li>
<li><a href="#">体育</a></li>
</ul>
</div>
</div>
</div>3.3.2 Different types of navigation
<div class="container">
<!----只需要改动class等于的值就能使用不同导航样式，该处为标签式---->
<ul class="nav nav-tabs">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">科技</a></li>
<li><a href="#">美食</a></li>
</ul>
</div>| tabbed navigation |
nav nav-tabs |
| Capsule |
nav nav-pills |
| breadcrumb navigation |
breadcrumb |
| tabbed navigation |
pagination |
| page turner |
page |
3.4. Hyperlinks
Grammar: <a href="URL"></a> can use # to indicate that there is no link to other places, and there is no link to other places in the above navigation bar.
3.5. Plug-in - carousel
You can insert pictures to achieve the effect of picture carousel
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>4. Form
Placing the form .navbar-forminside gives a nice vertical alignment and a collapsed state in a narrower viewport. .navbar-formUse the alignment option to determine where it appears on the navigation bar, and it is recommended that you place it within it when using it .
4.1. Vertical form vertical (default) Syntax: class="form-vertical"
4.2 Horizontal Form Syntax: class="form-horizontal"
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<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 type="submit" class="btn btn-default">进入邮箱</button>
</div>
</div>
</form>
4.3 Inline forms
Sometimes we need to control the form 都在一行内显示, then we need an inline form
Syntax: class="form-inline"
<div class="form-group">
<label class="control-label col-md-2">性别</label>
<div class="col-md-4">
<label class="radio-inline">
<input name="sex" type="radio" class="radio" />男
</label>
<label class="radio-inline">
<input name="sex" type="radio" class="radio" />女
</label>
</div>
</div>