目录
前言
记录一下自己学习前端的进程。时间仓促，加上代码量比较大，没有把全部的运行结果的截图传上来，如有不足之处，欢迎补充。
一、BootStrap简介
BootStrap这个框架是由Twitter推出,基于HTML、CSS、JavaScript 开的框架。
BootStrap具有灵活，直观，简洁等优点，让Web开发更加快捷。
大家有需要的可以用下面这个地址下载BootStrap：https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip
二、使用步骤
1.如何使用BootStrap框架
在下载完成后之后会有三个文件夹css,fonts,js，我们需要通过以下这段代码来调用，css中的“bootstrap.min.css”（压缩版）和js文件夹下的bootstrap.min.js。由于bootstrap是基于jquery的，所以在引入”bootstrap.min.js”前，要先引入jquery。并且js和jquery要放在body的最底部。
ps：最好把下载后的文件放在当前工作的文件夹下，这样可以通过以下这段代码直接调用，顺序最好不要改变，如果不在当前文件夹下，可以通过../来返回上一级来找到该文件调用。
<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栅格-响应式布局
2.1依赖于栅格系统：将一行平均分为12个格子，可以指定元素占几个格子，我们一般都是台式电脑，所以使用"col-md-*"语句即可。
| 栅格样式 | 描述 |
| col-lg-* | large 大型设备（大台式电脑，1200px 起 |
| col-md-* | middle 中型设备（台式电脑，992px 起） |
| col-sm-* | small 小型设备（平板电脑，768px 起） |
| col-xs-* | x-small 超小设备（手机，小于 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 BootStrap常用样式与标签
| 样式 | 描述 |
| .container | 让元素在容器中水平居中 |
| .col-md-4 | 占几个栅格 |
| .col-md-offset-4 | 左边空出几个栅格 |
| .col-md-push-8 | 向右浮动几个栅格 |
| col-md-pull-2 | 向左浮动几个栅格 |
<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 列嵌套
我们列嵌套最好加一行row，这样能个取消父元素的padding值，而且与父元素同高
<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.BootStrap常用组件
3.1 按钮组件
语法： <input type=button class="btn" value="这是一个按钮">
<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 面板组件
面板组件可以通过
1.panel提供基本的边界和内部，来包含内容
2.panel-heading可以简单地加入一个标题容器。
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
面板标题
</div>
<div class="panel-body">
面板内容
</div>
</div>
</div>3.3导航
3.3.1导航条是在您的应用或网站中作为导航标头的响应式元组件。它们在移动设备上可以折叠（并且可开可关），且在可用的视口宽度增加时变为水平展开模式。
Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。
标签页实例
ps .nav-tabs 类依赖 .nav 基类
<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 各式不同导航
<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>| 标签式导航 |
nav nav-tabs |
| 胶囊式 |
nav nav-pills |
| 面包屑式导航 |
breadcrumb |
| 分页式导航 |
pagination |
| 翻页式导航 |
page |
3.4.超链接
语法：<a href="网址"></a> 可以用#来表示不链接到别处，上面导航栏中就是没链接到别处。
3.5.插件——轮播图
可以把图片插进去实现图片轮播的效果
<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.表单
将表单放置于.navbar-form之内可以呈现很好的垂直对齐，并在较窄的viewport中呈现折叠状态。使用对齐选项可以确定其在导航条上出现的位置，建议大家在使用时都置于.navbar-form之内。
4.1.垂直表单 vertical（默认） 语法：class="form-vertical"
4.2水平表单 语法：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内联表单
有时候我们需要将表单的控件都在一行内显示，这时候就需要内联表单
语法：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>