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

乔乔 2020-01-06

1.1 介绍

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

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前端开发框架
大屏:
响应式布局---2. Bootstrap前端开发框架

相关推荐