前端移动web-day05学习笔记

2020-04-07 11:26:53 浏览数 (1)

01-bootstrap响应式布局框架学习

1.1-bootstrap介绍

  • 1.什么是Bootstrap：Bootstrap是一个响应式布局的框架
    • Bootstrap作用场景：做响应式布局网页
    • 框架：就是别人提前写好的css和js文件。
      • 框架作用：提高开发人员的工作效率（ctrl c/v 复制粘贴即可）
  • 2.如何使用Bootstrap框架（该流程适用于所有的第三方框架）
    • a.进官网:http://www.bootcss.com/
      • 下载别人写好的代码，然后在我们自己的文件导入
    • b.查文档(三大核心技术)：
      • bootstrap全局css样式:https://v3.bootcss.com/css/
      • bootstrap组件:https://v3.bootcss.com/components/
        • 组件：由多个html元素组成的一个独立的小功能
          • 例如：下拉菜单组件 由 div button ul li元素组成
          • 例如：进度条组件 由 div span元素组成
      • bootstrap栅格系统：https://v3.bootcss.com/css/#grid
        • boostrap的核心技术（实现响应式布局的核心技术）
          • 将屏幕以表格的形式划分为不同的区域(行row 列column)，在不同的屏幕下显示不同的区域
    • c.复制粘贴
  • 3.bootstrap环境配置
    • 目前bootstrap有三个版本，分别是 2.x、3.x、4.x，2.x是旧的版本，3.x是新的稳定版本，4.x还在完善中，所以我们目前使用的是3.x版本。 这个框架就是别人已经写好的css和JavaScript，我们要使用它，首先需要把这些样式和javascript相关文件下载下来，然后在我们的页面中引用这些文件就可以使用这个框架了，直接在这个网站下载，下载地址为：https://v3.bootcss.com/getting-started/#download。
    • 下载之后，会得到一个安装包，我们只需要将安装包中的css font js 这三个文件夹放到项目目录即可
    • 下载jquery:由于bootstrap这个框架里面的js代码使用的是一个js框架叫做jquery，所以我们还需要单独下载jquery，它的下载地址是：https://code.jquery.com/jquery-1.12.4.min.js

1.2-bootstrap初始化html模板

  • 所有的第三方框架在使用时都需要导入依赖包
    • 类似于字体图标一样，使用时需要导入style.css
  • bootstrap需要导入三个依赖包
    • <script src="js/jquery-1.12.4.min.js"></script>
    • <script src="js/bootstrap.min.js"></script>
    • <link rel="stylesheet" href="css/bootstrap.min.css">
  • 初始化模板：就是官网里面教你在创建html的时候需要导入哪些依赖包
    • bootstrao官方模板：不推荐使用，太过于冗余，有些用不上的也写上了
    • 自定义bootstrap模板：推荐使用，简洁明了

官方模板

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 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]-->
  </head>
  <body>
    <h1>你好，世界！</h1>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

自定义模板

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 要使用bootstrap，需要导入三个文件 -->
  <script src="js/jquery-1.12.4.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<body>
    <!-- 官网复制粘贴一段代码测试一下模板是否生效 -->
  <div class="h1">你好，世界</div>
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0"
      aria-valuemax="100" style="width: 45%">
      <span class="sr-only">45% Complete</span>
    </div>
  </div>
</body>
</html>

==1.3-bootstrap全局CSS样式==

  • 记住bootstrap中几个经典的类名后缀对应的颜色
    • default:默认 纯白色
    • link:链接 a标签默认颜色
    • success: 淡绿色(成功/确定) #dff0d8
    • info:天蓝色(信息) #5bc0de
    • warning:橘橙色(提示/警告) #f0ad4e
    • danger:酒红色(失败/错误) #d9534f
    • primary:青色(重要) #337ab7
  • 记住bootstrap中几个经典的尺寸类名后缀
  • lg: 大尺寸，对应大屏pc ,在栅格系统响应式布局中对应的屏幕是 >= 1200px
  • md：中尺寸，对应大屏平板ipadPro和小屏pc,在栅格系统响应式布局中对应的屏幕是 [992,1200)
  • sm:小尺寸，对应平板ipad,在栅格系统响应式布局中对应的屏幕是 [768,992)
  • xs:超小尺寸,对应手机移动端，在栅格系统响应式布局中对应的屏幕是<= 768

==1.4-bootstrap组件==

1.字体图标

2-按钮组件（官网了解）

3-进度条（官网了解）

==1.5-bootstrap栅格系统(响应式布局)==

1-栅格系统介绍

  • 1.什么叫什么系统：以table表格的形式划分页面空间，从而实现布局。
  • 2.栅格的组成部分：
    • a.版心容器container（相当于html页面的container版心，相当于table表格）
      • b.row(相当于html页面的父盒子模型,相当于table中的tr)
        • c.col(相当于html页面的子盒子模型，相当于table中的tr)

3.栅格样式的核心原理

  • a.版心容器（container是响应式版心，container-fluid是流式版心）
    • 他们两者唯一的区别是
      • container尺寸是固定的（1170,970,750,100%）
      • container-fluid的尺寸是铺满全屏: 100%
  • b.row:行
    • 默认没有高度，背景色、边框
    • 默认宽度为100%
      • 继承版心的宽度
    • 默认左右margin为 -15px （作用是抵消container左右的padding）
  • c.列col： 类名遵循固定的格式 col-s-x
    • s(screen):表示屏幕尺寸，他们有四个可选值
      • lg:大栅格，这种栅格在屏幕宽度大于等于1200时可以排成一行，小于1200时每个栅格独占一行
      • md:中栅格,这种栅格在屏幕宽度大于等于992时可以排成一行，小于992时每个栅格独占一行
      • sm:小栅格,这种栅格在屏幕宽度大于等于768时可以排成一行，小于768时每个栅格独占一行
      • xs:超小栅格,这种栅格所有屏幕宽度下都会排成一行
    • x(1-12之间的数字，尺寸比例)：bootstrap将水平方向分为12份，每一份表示row宽度的 1/12
      • ==col列需要写在行row标签中，每一行的栅格整体宽度占据12份，大于12份就会换行==
  • 示例：（详细效果请参考下图与真实代码演示）
    • col-设备类型-数字（宽度比例 1 = 屏幕 1/12）
    • col-lg-6:表示该栅格在屏幕宽度大于等于1200时，占的宽度比例是6份( 6/12 = 0.5 相当于width:50%)。一旦屏幕宽度小于1200，单独一行(x的尺寸直接失效)
    • col-lg-3:表示该栅格在屏幕宽度大于等于1200时，占的宽度比例是3份( 3/12 = 0.25 相当于width:25%)。一旦屏幕宽度小于1200，单独一行(x的尺寸直接失效)
    • col-md-4:表示该栅格在屏幕宽度大于等于992时，占的宽度比例是4份( 4/12 = 0.33 相当于width:33.3% 三分之一)。一旦屏幕宽度小于992，单独一行(x的尺寸直接失效)
    • col-sm-2:表示该栅格在屏幕宽度大于等于768时，占的宽度比例是2份( 2/12 = 0.167 相当于width:16.7%，六分之一)。一旦屏幕宽度小于768，单独一行(x的尺寸直接失效)
    • col-xs-8:表示该栅格在任何屏幕下，占的宽度比例是8份( 8/12 = 0.667 相当于width:66.7%，三分之二)。
    • col-lg-3 col-md-4:(1)表示该栅格在屏幕宽度 >= 1200时，占3份(宽度四分之一)，(2)在992<=屏幕宽度<1200时，占4份(宽度三分之一),(3) <=992 直接显示一行
    • col-lg-3 col-md-4 col-sm-6:(1)表示该栅格在屏幕宽度 >= 1200时，(2)占3份(宽度四分之一)，(3)在992<=屏幕宽度<1200时，占4份(宽度三分之一), <=992,(4)在 768<= 屏幕宽度 < 992时，占6份(二分之一),(5) <768,直接显示一行

2-版心容器container

  • bootstrap中有两种版心容器可供使用者选择
    • container：响应式版心容器
      • 默认样式：
        • 没有高度、边框、颜色
        • 左右15px的padding
      • 宽度是响应式
        • 屏幕宽度 < 768 宽度100%
        • 768 <= 屏幕宽度 < 992 宽度750
        • 992 <= 屏幕宽度 < 1200 宽度970
        • 1200 <= 屏幕宽度 < 1200 宽度1170
    • container-fluid：流式版心容器
      • 默认样式：
        • 没有高度、边框、颜色
        • 左右15px的padding
        • 宽度100%
代码语言：javascript复制
       /* 需求: 产品经理要求的版心与默认版心不一致？
      （1）>1200  要求版心1100
      （2）600 - 800之间  要求版心700
       解决方案：使用媒体查询覆盖默认的版心
       */
          @media(min-width:1200px){
              .container{
                  width: 1100px;
              }
          }
          @media(min-width:600px) and (max-width:800px){
              .container{
                  width: 700px;
              }
          }

3-行row

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导入bootstrap -->
    <!-- 1.jquery.js -->
    <script src="./bootstrap/js/jquery-1.12.4.min.js"></script>
    <!-- 2.bootsrap.js -->
    <script src="./bootstrap/js/bootstrap.js"></script>
    <!-- 3.bootstrap.css -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
     <!-- 
         (2)栅格系统  行 ： row
            默认样式： 没有高度，宽度100%， 左右-15px margin(目的：抵消版心的padding)
      -->
      <style>

          /* 版心 */
          .container-fluid{
              background-color: pink
          }
          /* 行:row */
          .row{
              height: 100px;
              margin-top: 10px;
              background-color: green;
          }
      </style>
</head>
<body>
    <!-- 版心 -->
    <div class="container-fluid">
        <!-- 行：父元素（top-bar banner nav-bar list） -->
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
    </div>
</body>
</html>

4-列col

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导入bootstrap -->
    <!-- 1.jquery.js -->
    <script src="./bootstrap/js/jquery-1.12.4.min.js"></script>
    <!-- 2.bootsrap.js -->
    <script src="./bootstrap/js/bootstrap.js"></script>
    <!-- 3.bootstrap.css -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
      <style>

          /* 版心 */
          .container-fluid{
              background-color: pink
          }
          /* 列： col-尺寸-比例   ( bootstrap将屏幕分为12份， 1 = 1/12 )
                lg: 尺寸   >1200px
                6 : 宽度比例     1 = 屏幕1/12    6 * 1/12 = 50%
          (1) col-lg-6  ： 当屏幕宽度>1200px, 宽度比例生效。 否则不生效（100%）
          (2) col-md-3  :  当屏幕尺寸>992px,宽度比例生效。 否则不生效（100%）
          (3) col-sm-2  :  当屏幕尺寸>768px,宽度比例生效。 否则不生效（100%）
          (4) col-xs-4  :  任何屏幕尺寸， 宽度比例都会生效
          */

          /* div[] : 属性选择器
                class*="col-lg" : 类名只要包含 col-lg
          */
          div[class*="col-lg"]{
            height: 50px;
            background-color: red;
            border: 1px solid black;
          }

          div[class*="col-md"]{
            height: 50px;
            background-color: orange;
            border: 1px solid black;
          }

          div[class*="col-sm"]{
            height: 50px;
            background-color: yellow;
            border: 1px solid black;
          }

          div[class*="col-xs"]{
            height: 50px;
            background-color: green;
            border: 1px solid black;
          }
      </style>
</head>
<body>
    <!-- 版心 -->
    <div class="container-fluid">
        <!-- 行：父元素（top-bar banner nav-bar list） -->
        <div class="row">
            <!-- 列：子元素 -->
            <div class="col-lg-6">屏幕一半</div>
            <div class="col-lg-3">屏幕四分之一</div>
            <div class="col-lg-3">屏幕四分之一</div>
        </div>
        <!-- 父元素 -->
        <div class="row">
            <!-- 列：子元素 -->
            <div class="col-md-3">四分之一</div>
            <div class="col-md-3">四分之一</div>
            <div class="col-md-3">四分之一</div>
            <div class="col-md-3">四分之一</div>
        </div>
        <!-- 父元素 -->
        <div class="row">
            <!-- 列：子元素 -->
            <div class="col-sm-2">六分之一</div>
            <div class="col-sm-2">六分之一</div>
            <div class="col-sm-2">六分之一</div>
            <div class="col-sm-2">六分之一</div>
            <div class="col-sm-2">六分之一</div>
            <div class="col-sm-2">六分之一</div>
        </div>
        <!-- 父元素 -->
        <div class="row">
            <!-- 列：子元素 -->
            <div class="col-xs-4">三分之一</div>
            <div class="col-xs-4">三分之一</div>
            <div class="col-xs-4">三分之一</div>
        </div>
    </div>
</body>
</html>

5-栅格偏移

  • 栅格默认是左浮动的，所有栅格默认是靠左对齐的，但是栅格在排列时也可以往右偏移一段距离，通过偏移的样式类就可以了，偏移的样式类和栅格一样，也分为四种 1、.col-lg-offset-x x代表1~12的数字，它表示栅格偏移的宽度份数，在屏幕宽度大于等于1200起作用 2、.col-md-offset-x 在屏幕宽度大于等于992起作用 3、.col-sm-offset-x 在屏幕宽度大于等于768起作用 4、.col-xs-offset-x 在屏幕宽度小于768起作用

6-栅格隐藏

在某个查询区间，将栅格隐藏，可以用隐藏的样式，这个样式包括四个： 1、.hidden-xs 在屏幕小于768时将栅格隐藏 2、.hidden-sm 在屏幕大于等于768小于992时将栅格隐藏 3、.hidden-md 在屏幕大于等于992小于1200时将栅格隐藏 4、.hidden-lg 在屏幕大于等于1200时将栅格隐藏

注意点

a：如果设置一个栅格隐藏样式为hidden-md:表示该栅格只会在 768 <= 屏幕尺寸 <992区间隐藏，如果屏幕尺寸 <= 768，则又会显示

b.如果希望一个栅格在屏幕尺寸 <= 992时隐藏，可以设置栅格隐藏样式为:hidden-sm hidden-xs

bootstrap css html javascript https

0 人点赞