正文
（22）bootstrap 初识 + Font Awesome(字体图标库)
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
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" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div> <!--快速创建图标,只要在组件里赋值需要的样式名字，黏贴到标签的类名即可-->
<!--这个叫字体图标，设置大小只要在style里设置标签的字体大小即可-->
<div class="row">
<i class="glyphicon glyphicon-qrcode"></i>
</div> <!--快速布局下拉框-->
<div class="row">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">呵呵</a></li>
<li><a href="#">嘻嘻</a></li>
<li><a href="#">Something else here</a></li>
<!--这个就是加线-->
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div> <!--快速添加分页标签-->
<div class="row">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="abcdef"><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>
</div>
</div></body>
<script src="js/jq.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script><!--为分页符添加逻辑-->
<script>
$('.abcdef').click(function () {
alert('请点击')
})
</script>
</html>
