专栏首页前端与Java学习前端移动web-day05学习笔记
原创

前端移动web-day05学习笔记

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模板:推荐使用,简洁明了

官方模板

<!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>

自定义模板

<!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%
       /* 需求: 产品经理要求的版心与默认版心不一致?
      (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

<!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

<!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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端day10-JS学习笔记(数组、函数、对象)

    3.变量取值: 函数名 (不会执行函数体代码,只是以字符串形式将变量中存储的东西打印出来而已)

    帅的一麻皮
  • 前端day21-JS正则表达式

    1.字符类: /[abc]/ 含义:只要字符串中有 a 或者有 b 或者有 c 就满足条件

    帅的一麻皮
  • 前端day18-JS高级(完整的原型链)学习笔记

    帅的一麻皮
  • MQTT开源代理Mosquitto源码分析(访问控制篇)

    从GitHub下载源码后,代理的源码在src中,同时还用到了lib库中的一些函数。对项目的工作流程有个大概理解是分析mosquitto的访问控制权限的基础,网络...

    ascii0x03
  • 定制狮打造第三个“1”,全面解码男士西装定制

    本文由齿轮易创原创,首发于齿轮易创微信公众号,更多产品、技术干货、精彩案例尽在齿轮易创微信公众号。转载投稿等事宜请私信联系,未经许可禁止转载。

    齿轮易创说互联网
  • 21天,搞定软件测试从业者需要掌握的SQL

    学习一门新技能,最难的是不知道到底要学啥;没法聚焦精力,锁定目标,把这门技能掌握;

    IDO老徐
  • 实战:基于技术分析的Python算法交易

    本文是用 Python 做交易策略回测系列文章的第四篇。上个部分介绍了以下几个方面内容:

    AI科技大本营
  • 软件测试从业者必备SQL合集V1.0(21天搞定)

    这是,IDO老徐最近在进行的21天SQL打卡的作业 & 参考答案的合集,提供给所有软件测试从业者 ;

    IDO老徐
  • 你知道吗,Flutter内置了10多种show

    builder通常返回Dialog组件,比如SimpleDialog和AlertDialog。

    老孟程序员
  • 揭秘今年情人节票房数据骤降的原因

    令人愉快的二月已经过去了,已经进入工作状态的我们已经从春节的轻松氛围中进入了紧张而有序的忙碌状态。越是在紧张的状态下,我们就越需要看一场电影来放松紧张的神经,可...

    小莹莹

扫码关注云+社区

领取腾讯云代金券