bootstrap作用就是简化布局
bootstrap是基于JQ的，所以内部代码使用的是jq语法
所以要使用bs，必须先倒入
1、head标签内倒入bs的css文件 <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
2、body标签的后面导入js文件 ： <script src="js/jq.js"></script>
3、body标签的后面倒入bs的js文件 ： <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
bootstrap官网：http://www.bootcss.com/
1、
下载bootstrap
2、
3、
4、直接复制到项目目录
Font Awesome
下载网站：http://www.fontawesome.com.cn/
bs初识实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<h1>bootstrap是基于JQ的</h1>
<h2>快速帮助我们完成布局和样式</h2>
<!--bs下已经写了很多样式，导入后根据源码使用即可，比如按钮类名叫btn就会变成bs设置好的样式，再加一个类名就会变另外一种-->
<button class="btn btn-danger">按钮</button>
<div class="bg-success">div</div>
<h3>简单理解bs，给标签添加类名就可以获取bs提前写好的样式</h3>
<h3>固定结构下的固定类名不仅可以获得样式还可以获得事件</h3>
</body>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>
深入了解实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap深入了解</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
i {
font-size: 30px;
}
</style>
</head>
<body>
<!--屏幕的尺寸和自适应-->
<!--什么是栅格系统：父级标签默认被平分12等分，子级可以选择占用几分-->
<!--container就是容器，相当于最外层套的一层,有padding默认值 0 15px-->
<div class="container">
<!--row：容器中的一行，有默认值margin：0 -15px，正好抵消container的padding-->
<div class="row">
<!--利用bs快速布局，栅格系统，自适应屏幕分辨率-->
<!--col四个值就是分别对应屏幕的大小，在对应的屏幕尺寸下这个页面占显示区域的几分-->
<div class="box bg-success .col-xs-1 .col-sm-6 .col-md-9 .col-lg-6">123</div>
</div>
<!--快速形成表单,在bs的页面下找到对应的代码复制进来-->
<div class="row">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" ><!--为分页符添加逻辑-->
<script>
$('.abcdef').click(function () {
alert('请点击')
})
</script>
</html>
查看更多关于【bootstrap】的文章
