响应式布局---2. Bootstrap前端开发框架

乔乔

2020-01-06

关注关注

1.1 介绍

Bootstrap来自Twitter,是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的，它简洁灵活，使得web开发更加快捷。

中文官网：http://www.bootcss.com/
官网：http://getbootstrap.com/
推荐使用：https://v3.bootcss.com/

1.2 使用

控制权在框架本身，使用者要按照框架所规定的某种规范进行开发
Bootstrap使用四部曲：

1.2.1 创建文件夹结构

响应式布局---2. Bootstrap前端开发框架

在https://v3.bootcss.com/下载bootstrap的压缩文件，解压后将其中的文件夹(css,fonts,js)复制到刚刚建立的bootstrap文件夹下：

响应式布局---2. 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类

响应式布局的容器固定宽度
大屏（>=1200px）宽度定为1170px
中屏（>=992px）宽度定为970px
小屏（>=768px）宽度定为750px
超小屏（100%）
上述宽度都是设定好的，不可以像之前一样任意修改
.container-fluid类
流式布局容器百分比宽度
占据全部视口(viewport)的容器
适合于单独移动端开发

<body>
    <!-- 此时拉伸屏幕可以看到container盒子的宽度自动在1170px、970px、750px、100%之间变化 可以与01-响应式布局原理中的代码进行比较 这里省略了媒体查询 实际上媒体查询的部分在bootstrap中定义好了 -->
    <!-- 注意在bootstrap里面为container定义了一个左右15px的内边距 -->
    <div class="container">123</div>
    <!-- 适合于单独移动端开发 不适合响应式开发 -->
    <div class="container-fluid">abc</div>
</body>

超小屏：
响应式布局---2. Bootstrap前端开发框架
大屏：