黑马pink老师移动Web开发-Bootstrap案例

1:响应式开发原理：

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从 而适配不同设备的目的

 

平时我们的响应式尺寸划分

1.超小屏幕（手机，小于768px）：布局容器设置宽度为100%

2.小屏幕（平板，大于等于768px）：布局容器设置宽度为750px

3.中等屏幕（桌面显示器，大于等于992px）：布局容器宽度设置为970px

4大屏幕（大桌面显示器，大于等于1200px）：布局容器宽度设置为1170px

注意：@media screen 的含义

利用 @media screen 实现网页布局的自适应,@media screen and
开始研究响应式web设计，CSS3 Media Queries是入门。

其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。

换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。
那么，Media Queries是如何工作的？
两种方式：

一种是直接在link中判断设备的尺寸，然后引用不同的css文件：

  <link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">
意思是当屏幕的宽度 大于等于400px的时候，应用styleA.css

在media属性里：
screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型
and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)
(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。
 <link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">
意思是当屏幕的宽度大于600小于800时，应用styleB.css

另一种方式，即是直接写在<style>标签里：
 @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
      .class {
          background: #ccc;
       }          
  }
写法是前面加@media，其它跟link里的media属性相同。

其实基本上就是样式覆盖~，判断设备，然后引用不同的样式文件覆盖。
要注意的是由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要，否则会出现横向滚动条。
原文链接：https://blog.csdn.net/qq_37968920/article/details/82424009

<!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" />
    <title>Document</title>

    <style>
      .container {
        height: 150px;
        background-color: pink;
        margin: 0 auto;
      }
      /* 1.超小屏幕（手机，小于768px）：布局容器设置宽度为100% */
      /* 当屏幕尺寸小于767px时，应用下面的CSS样式 */
      @media screen and (max-width: 767px) {
        .container {
          width: 100%;
        }
      }

      /* 2.小屏幕（平板，大于等于768px）：布局容器设置宽度为750px */
      @media screen and (min-width: 768px) {
        .container {
          width: 750px;
        }
      }

      /* 3.中等屏幕（桌面显示器，大于等于992px）：布局容器宽度设置为970px */
      @media screen and (min-width: 992px) {
        .container {
          width: 970px;
        }
      }

      /* 4大屏幕（大桌面显示器，大于等于1200px）：布局容器宽度设置为1170px */
      @media screen and (min-width: 1200px) {
        .container {
          width: 1170px;
        }
      }
    </style>
  </head>
  <body>
    <!-- 响应式开发里面。首先需要一个布局容器 -->
    <div class="container"></div>
  </body>
</html>

2.响应式导航

<!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" />
    <title>Document</title>

    <style>
      * {
        margin: 0;
        padding: 0;
      }

      ul {
        list-style: none;
      }

      .container {
        height: 750px;
        margin: 0 auto;
      }

      .container ul li {
        float: left;
        width: 93.75px;
        height: 30px;
        background-color: green;
      }

      /* 1.超小屏幕（手机，小于768px）：布局容器设置宽度为100% */
      /* 当屏幕尺寸小于767px时，应用下面的CSS样式 */
      @media screen and (max-width: 767px) {
        .container {
          width: 100%;
        }
        .container ul li {
          width: 33.33%;
        }
      }
    </style>
  </head>
  <body>
    <!-- 响应式开发里面。首先需要一个布局容器 -->
    <div class="container">
      <ul>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
      </ul>
    </div>
  </body>
</html>

3.       Bootstrap框架

3.1:Bootstrap使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- 要求当前的网页使用IE浏览器的最高版本的内核来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--[if lt IE 9]>
      <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap的样式文件 -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
    <title>Document</title>
  </head>
  <body>
    123
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- 要求当前的网页使用IE浏览器的最高版本的内核来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--[if lt IE 9]>
      <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap的样式文件 -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
    <title>Document</title>
    <style>
      /* 利用我们自己写的样式覆盖原来的样式 */
      .login {
        width: 100px;
        height: 45px;
      }
    </style>
  </head>
  <body>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-success login">登录</button>
    <button type="button" class="btn btn-primary btn-lg">
      （大按钮）Large button
    </button>
  </body>
</html>

4.布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstrap预先定义好了这个类，叫做.container,它提供了两个作此用处的类

1.container类

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

超小屏幕（手机，小于768px）：布局容器设置宽度为100%

小屏幕（平板，大于等于768px）：布局容器设置宽度为750px

中等屏幕（桌面显示器，大于等于992px）：布局容器宽度设置为970px

大屏幕（大桌面显示器，大于等于1200px）：布局容器宽度设置为1170px

2.container-fluid类

流式布局容器 百分百宽度

占据全部视口（viewport）的容器

适合单独做移动开发

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- 要求当前的网页使用IE浏览器的最高版本的内核来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--[if lt IE 9]>
      <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap的样式文件 -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div class="container">123</div>
    <div class="container-fluid">123</div>
  </body>
</html>

5.栅格系统

 

 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

注意：[class^=“icon_”] 表示以icon_开头的class
[class*=" icon_"] 表示包含icon_的class

<div>

<p>这是一个p</p>

<a>这是一个a</a>

<a>这是又一个a</a>

</div>

a:nth-child(2)的意思是：先拿出a元素的父元素（即div）中的第2个子元素，再看看是不是a，正好是，所以就选中了“<a>这是一个a</a>”；

同理，a:nth-child(1)的意思是：拿出div的第1个子元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- 要求当前的网页使用IE浏览器的最高版本的内核来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--[if lt IE 9]>
      <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap的样式文件 -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
    <title>Document</title>
    <style>
      [class^="col"] {
        border: 1px solid #ccc;
      }

      .container .row:nth-child(1) {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
      </div>
      <!-- 如果孩子的分数相加等于12，则孩子能占满整个的containter的宽度 -->
      <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-2">4</div>
        col-md-4
      </div>
      <!-- 如果孩子的分数相加小于12，则站不满整个的containter的宽度，会有空白 -->
      <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-1">4</div>
      </div>
      <!-- 如果孩子的分数相加大于12，多出来的那一列会另起一行显示 -->
      <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-3">4</div>
      </div>
    </div>
  </body>
</html>

 6.栅格系统列嵌套

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- 要求当前的网页使用IE浏览器的最高版本的内核来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--[if lt IE 9]>
      <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap的样式文件 -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
    <title>Document</title>
    <style>
      .row > div {
        height: 50px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <!-- 我们列嵌套最好加一个行row，这样可以去掉父元素的padding值,而且高度自动与父级一样高 -->
          <div class="row">
            <div class="col-md-4">a</div>
            <div class="col-md-8">b</div>
          </div>
        </div>
        <div class="col-md-4">2</div>
        <div class="col-md-4">3</div>
      </div>
    </div>
  </body>
</html>

  7.栅格系统的偏移

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- 要求当前的网页使用IE浏览器的最高版本的内核来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--[if lt IE 9]>
      <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap的样式文件 -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
    <title>Document</title>
    <style>
      .row div {
        height: 50px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-3">左侧</div>
        <!-- 偏移的份数是12-两个盒子的份数 -->
        <div class="col-md-3 col-md-offset-6">右侧</div>
      </div>
      <div class="row">
        <div class="col-md-8 col-md-offset-2">中间盒子</div>
      </div>
    </div>
  </body>
</html>

使用

 结果：

   8.栅格系统的列排序

使用.col-md-push-（推）*和.col-md-pull-（拉）*类就可以很容易的改变列(column)的顺序

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- 要求当前的网页使用IE浏览器的最高版本的内核来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--[if lt IE 9]>
      <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap的样式文件 -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
    <title>Document</title>
    <style>
      .row div {
        height: 50px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-4 col-md-push-8">左侧</div>
        <div class="col-md-8 col-md-pull-4">右侧</div>
      </div>
    </div>
  </body>
</html>

    9.栅格系统的响应式工具

使用这些工具类可以方便的针对不同设备展示或隐藏页面内容

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

与之相反的是visible-xs visible-sm visible-md visible-lg是显示某个页面内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- 要求当前的网页使用IE浏览器的最高版本的内核来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--[if lt IE 9]>
      <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap的样式文件 -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
    <title>Document</title>
    <style>
        .row div:nth-child(3){
            background-color: pink;
        }
        span {
            font-size:50px;
            color:#fff
        }
    </style>
  </head>
  <body></body>
    <div class="container">
      <div class="row">
        <div class="col-sx-3">
            <span class="visible-lg">我会显示哦</span>
        </div>
        <div class="col-sx-3">2</div>
        <div class="col-sx-3 hidden-md hidden-xs">我会变魔术哦</div>
        <div class="col-sx-3">4</div>
      </div>
    </div>
  </body>
</html>

10.阿里百秀首页案例

Bootstrap使用四部曲：

1：创建文件夹结构

 

2.创建html骨架结构

3.引入相关样式文件

4.书写内容

 ​​​​​​​

版权声明：本文为weixin_42523298原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。