移动端基础-响应式开发：Bootstrap前端开发框架

Bootstrap使用

目前只考虑样式库CSS布局效果

步骤：

1.创建文件

2.创建HTML骨架结构

3.引入相应样式文件

4.书写内容

创建文件

到官网下载好bootstrap.js

创建文件夹：

将样式引入

直接查找css样式：

注意：不同的样式是通过类来定义的，所有可以得到同样效果如下：

书写内容：

直接拿bootstrap预先定义好的样式使用

可以修改bootstrap原来的样式，注意权重

布局容器

为页面内容和栅格系统包裹一个.container容器，bootstrap预先定义好了这个类，叫.container，

它提供了两个做此用处的类

1. container

响应式布局的容器 固定宽度

大屏（>=1200px）宽度定位1170px

中屏（>=992px）宽度定位970px

小屏（>=768px）宽度定位750px

超小屏（100%）

划分了四个档位，不再需要媒体查询

2. container-fluid

流式布局容器 100%宽度

占据全部视口的容器

适于单独做移动端开发

栅格系统

将页面布局划分为等宽的列（通常为12份），通过列数的定义模块化页面布局

与rem的区别是 bs是container被划分，rem是window被划分

系统通过row与column的组合创建页面布局，页面可以放入这些创建好的布局中

如果孩子分数等于12，占满container宽度

如果孩子分数小于12，留有空白

如果大于，会换行

如图可以实现响应式，屏幕缩小时每行的布局发生变化

每一列默认15px的padding

栅格系统列嵌套

一个列内再分为若干小份，嵌套最好加一个row，即取消padding值，高度还和父级一样（因为row的外边距为负值，抵消边距）

列偏移

col-md-offset-偏移列数

效果：

其实偏移的实质是增加外边距

列排序

通过 .col-md-push-*和 .col-md-push-*类改变列的顺序

响应式工具

对不同设备展示或隐藏页面内容

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

可在中屏时，可隐藏3

同理，有 .visible-xs显示内容

案例

设计图：采用1280px设计尺寸

框架bootstrap：

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

   <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
   <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
   <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

   <title>Bootstrap 101 Template</title>

   <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
   <link rel="shortcut icon" href="">
   <link rel="stylesheet" href="css/index.css">
   <meta name="keywords" content="..." />
   <style>
      /*写代码时始终要考虑权重问题！*/

      @font-face {
         font-family: 'icomoon';
         src: url('fonts/icomoon.eot?au9n7q');
         src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?au9n7q') format('truetype'),
            url('fonts/icomoon.woff?au9n7q') format('woff'),
            url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');
         font-weight: normal;
         font-style: normal;
         font-display: block;
      }
   </style>

</head>

<body>
   <div class="container">
      <div class="row">
         <header class="col-md-2">
            <div class="logo">
               <a href="#">
                  <img src="https://vivianlhm.gitee.io/alibaba-baixiu-project/images/logo.png" alt="" class="hidden-xs">
                  <span class="visible-xs">阿里百秀</span>
               </a>
            </div>
            <div class="nav">
               <ul>
                  <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
                  <li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li>
                  <li><a href="#" class="glyphicon glyphicon-apple">科技潮</a></li>
                  <li><a href="#" class="glyphicon glyphicon-gift">奇趣事</a></li>
                  <li><a href="#" class="glyphicon glyphicon-glass">美食节</a></li>
               </ul>
            </div>
         </header>
         <article class="col-md-7">
            <div class="new clearfix">
               <ul>
                  <li><a href="#"><img src="	https://vivianlhm.gitee.io/alibaba-baixiu-project/upload/lg.png" alt="">
                        <p>阿里百秀</p>
                     </a></li>
                  <li><a href="#">
                        <img src="https://vivianlhm.gitee.io/alibaba-baixiu-project/upload/1.jpg" alt="">
                        <p>奇了，成都一小区护卫长得像马云，市民纷纷求合影</p>
                     </a></li>
                  <li><a href="#"><img src="https://vivianlhm.gitee.io/alibaba-baixiu-project/upload/2.jpg" alt="">
                        <p>奇了，成都一小区护卫长得像马云，市民纷纷求合影</p>
                     </a></li>
                  <li><a href="#"><img src="https://vivianlhm.gitee.io/alibaba-baixiu-project/upload/3.jpg" alt="">
                        <p>奇了，成都一小区护卫长得像马云，市民纷纷求合影</p>
                     </a></li>
                  <li><a href="#"><img src="https://vivianlhm.gitee.io/alibaba-baixiu-project/upload/4.jpg" alt="">
                        <p>奇了，成都一小区护卫长得像马云，市民纷纷求合影</p>
                     </a></li>
               </ul>
            </div>
            <div class="publish">
               <div class="row">
                  <div class="col-sm-9">
                     <h3>生活馆 关于养生应该知道的知识</h3>
                     <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-20</p>
                     <p>养生知识10个，你值得拥有</p>
                     <p class="text-muted hidden-xs">阅读（2417）评论（1234）赞（12万）标签：健康</p>
                  </div>
                  <div class="col-sm-3 hidden-xs">
                     <img src="https://vivianlhm.gitee.io/alibaba-baixiu-project/upload/3.jpg" alt="">
                  </div>
               </div>
               <div class="row">
                  <div class="col-sm-9">
                     <h3>生活馆 关于养生应该知道的知识</h3>
                     <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-20</p>
                     <p>养生知识10个，你值得拥有</p>
                     <p class="text-muted hidden-xs">阅读（2417）评论（1234）赞（12万）标签：健康</p>
                  </div>
                  <div class="col-sm-3 hidden-xs">
                     <img src="https://vivianlhm.gitee.io/alibaba-baixiu-project/upload/3.jpg" alt="">
                  </div>
               </div>
               <div class="row">
                  <div class="col-sm-9">
                     <h3>生活馆 关于养生应该知道的知识</h3>
                     <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-20</p>
                     <p>养生知识10个，你值得拥有</p>
                     <p class="text-muted hidden-xs">阅读（2417）评论（1234）赞（12万）标签：健康</p>
                  </div>
                  <div class="col-sm-3 hidden-xs">
                     <img src="https://vivianlhm.gitee.io/alibaba-baixiu-project/upload/3.jpg" alt="">
                  </div>
               </div>
            </div>
         </article>
         <aside class="col-md-3">
            <a href="#" class="banner">
               <img src="https://vivianlhm.gitee.io/alibaba-baixiu-project/upload/zgboke.jpg" alt="">
            </a>
            <a href="#" class="hot">
               <span class="btn btn-primary">热搜</span>
               <h4 class="text-primary">欢迎加入中国博客联盟</h4>
               <p class="text-muted">这里收录了国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示</p>
            </a>
         </aside>
      </div>
   </div>
</body>

</html>

@media screen and (min-width: 1280px) {
    .container {
        width: 1280px;
    }
}

body {
    background-color: #f5f5f5;

    .container {
        background-color: #fff;
    }
}

li {
    list-style: none;
}

button {
    cursor: pointer;
}

a {
    color: #666;
    text-decoration: none !important;
}

button,
input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

.logo {
    background-color: #429ad9;

    img {
        display: block;
        max-width: 100%;
        margin: 0 auto;
    }

    span {
        display: block;
        height: 50px;
        line-height: 50px;
        color: #fff;
        font-size: 18px;
        text-align: center;
    }
}

header {
    padding-left: 0 !important;
}

.nav {
    background-color: #eee;
    border-bottom: 1px solid #ccc;

    a {
        text-decoration: none;
        display: block;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        padding-left: 30px;

        &:hover {
            background-color: #fff;
            text-decoration: none;
        }

        &::before {
            vertical-align: middle;
            padding-right: 5px;
        }
    }
}

ul {
    margin: 0;
    padding: 0;
}

@media screen and (max-width:991px) {
    .nav li {
        float: left;
        width: 20%;
    }

    article {
        margin-top: 10px;
    }
}

@media screen and (max-width:766px) {
    .nav li a {
        font-size: 12px;
    }

    .new {

        li:nth-child(1) {
            width: 100% !important;
        }

        li {
            width: 50%!important;
        }
    }
}

.new {

    li {
        float: left;
        width: 25%;
        height: 128px;
        padding-right: 10px;
        margin-bottom: 10px;

        a {
            display: block;
            width: 100%;
            height: 100%;
            position: relative;

            p {
                position: absolute;
                bottom: 0;
                left: 0;
                background: rgba(0, 0, 0, .5);
                color: #fff;
                font-size: 12px;
                width: 100%;
                height: 41px;
                margin-bottom: 0;
                padding: 5px 10px;
            }

            img {
                width: 100%;
                height: 100%;
            }
        }

        &:nth-child(1) {
            width: 50%;
            height: 266px;

            p {
                line-height: 41px;
                font-size: 20px;
                padding: 0 10px;
            }
        }
    }
}

.publish {
    border-top: 1px solid #ccc;

    img {
        margin-top: 10px;
        width: 100%;
    }

    .row {
        border-bottom: 1px solid #ccc;
        padding: 10px 0;

        h3 {
            font-size: 14px;
        }
    }

}

.banner {

    img {
        width: 100%;
    }
}

.hot {
    display: block;
    margin-top: 10px;
    border: 1px solid #ccc;
    padding: 0 20px 20px;

    span {
        border-radius: 0;
        margin-bottom: 20px;
    }
}