响应式布局---2. Bootstrap前端开发框架
作者：互联网
1.1 介绍
Bootstrap来自Twitter,是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的，它简洁灵活，使得web开发更加快捷。
1.2 使用
控制权在框架本身，使用者要按照框架所规定的某种规范进行开发
Bootstrap使用四部曲：
1.2.1 创建文件夹结构
在https://v3.bootcss.com/下载bootstrap的压缩文件，解压后将其中的文件夹(css,fonts,js)复制到刚刚建立的bootstrap文件夹下：
1.2.2 创建html骨架结构、引入相关样式文件
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 要求当前页面使用IE浏览器最高版本的内核来渲染 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--[if lt IE 9]>
解决ie9以下浏览器对html5新增标签不识别，并导致css不起作用的问题
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
解决ie9以下浏览器对css3 Media Query 的不识别问题
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- 一定不要忘记引入bootstrap的样式文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Document</title>1.2.3 书写内容
- 直接拿Bootstrap预先定义好的样式来用
- 修改Bootstrap原来的样式，注意权重问题
- 学好Bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果
<body>
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- bootstrap是根据类来创建外观形状 -->
<div class="btn btn-success login">登陆</div>
<div class="btn btn-danger">未成功</div>
</body>/* 利用我们自己写的样式覆盖原先的样式 */
.login {
width: 88px;
height: 45px;
}1.3 布局容器
Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstrap预先定义好了这个类，叫.container,它提供两个做此用处的类。（注意：这个类名必须是container，不可更改）
标签：container,1.2,样式,Bootstrap,响应,bootcss,com,前端开发 来源： https://www.cnblogs.com/deer-cen/p/12157915.html