T-Bootstrap-day01-响应式、bootstrap

文章目录

  • Bootstrap
  • 一.响应式 (css3 2010提出的技术,boot做了简化)
  • 二.BootStrap

Bootstrap

https://www.bootcss.com/

一.响应式 (css3 2010提出的技术,boot做了简化)

  1. 什么是响应式网页
    Responsive web page 响应式/自适应网页
    可以根据设备不同(pc,phone,pc)而自动改变布局,图片,文本效果,不会影响用户体验
  2. 初学者想做响应式,必须完成以下几件事(熟手请忽略)
    1. 布局,不能固定元素的宽度,必须是流式布局(默认文档流+浮动),初学者尽量不写定位
    2. 文字和图片大小随着容器大小改变
    3. 使用媒体查询技术(在不同设备下,调用不同的样式,导致代码量几何性增加)。非常复杂的页面不适合用响应式
  3. 如何测试响应式网页
    1. 使用真实设备测试
      好处:真实准确
      坏处:成本太高,测试任务量巨大
    2. 使用第三方测试软件(虚拟机)
      好处:不需要太多真实设备,测试方便
      坏处:测试结果不准确,很多硬件无法测试
    3. 使用chrome自带的模拟软件
      好处:简单方便
      坏处:不太靠谱(好多机器都没有)
    4. 在学习过程中:直接改变浏览器尺寸就可以了。
  4. 编写响应式布局(重要)
    1. 移动端适配
      如果不在移动运行页面,就可以不写
              <meta name="viewport" 
              content="width=device-width,  --视口宽度为设备宽度
              initial-scale=1.0,     --视口初始化时的缩放倍数 1倍,1.0表示不缩放
              maximum-scale=1.0,  --视口缩放的最大倍率设置1倍,不缩放
              user-scalable=0">    --用户可不可以缩放视口,0表示不能缩放
      
      最简洁的写法
    2. 所有的内容/文本/图片,尽量使用相对尺寸,不使用绝对值(当响应式特别熟练,可以随便写)
    3. 流式布局+弹性布局+媒体查询,完成响应式网页
    4. 媒体查询
      css3提供的 Media Query,做响应式的必备技术
      1. Media :媒体---->设备(硬件设备,分辨率,刷新率,横屏竖屏…)
        1. 硬件设备:
          1. screen(pc,pad , phone)
          2. TV (电视)
          3. print (打印机屏幕,微波炉屏幕,洗衣机屏幕…)
        2. 分辨率: 行业内,把屏幕宽度,分成5组
          1. 超大屏幕—屏幕宽度>=1200px—xl(对应的缩写)
          2. 大屏—992px<=屏幕宽度<1200px—lg
          3. 中屏—768px<=屏幕宽度<992px—md
          4. 小屏—576px<=屏幕宽度<768px—sm
          5. 超小屏—屏幕宽度<576px—xs
      2. Media Query:媒体查询,可以根据当前浏览器设备不同,自动的,有选择性,执行一部分样式,忽略其他样式
        语法 @media 条件1 and 条件2 and 条件3{选择器{样式声明}}
        /* xl 超大屏 */
        @media screen  and (min-width:1200px){
                   
            .content{
                   
                background-color: #aaf;
                color: #f00;
                font: 12px "mv boli";
            }
        }
        
      注意:①条件可不可以省略?逻辑正确的情况下,条件可以省略,例如:screen;②最简写法,只写min-width的条件,先写小屏,从小往大写。优点
      1. 代码量急剧减少
      2. 响应式会向上兼容
        sm在sm/md/lg/xl屏幕下有效
        md在md/lg/xl有效
        lg在lg/xl有效
        xl在xl有效
      3. 条件可以自己随意更改 (例如特殊需求:min-width:777px)

二.BootStrap

boot以类的方式,封装了很多样式,能高效提升开发效率
有些时候,boot的样式不符合我们需求,需要重写样式
很多时候,也需要手写媒体查询
Boot4需要查看boot4和boot3的两份文档

  1. 如何使用boot
    1. 定义视口
    2. 导入4个文件(必须按照下面的顺序导入)



    3. 添加div
      
      <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Documenttitle>
              <meta name="viewport" content="width=device-width,initial-scale=1">
              <link rel="stylesheet" href="css/bootstrap.css">
              <script src="js/jquery.min.js">script>
              <script src="js/popper.min.js">script>
              <script src="js/bootstrap.min.js">script>
          head>
          <body>
              <div class="container">
      
              div>
          body>
      html>
      
  2. 全局样式
    boot封装了4个屏幕的响应式,没有超小屏
    .container:在不同屏幕下有最大宽度,定宽容器
    .container-fluid:定宽容器,宽度是body的100%
    boot中1个rem=16px
    1. 按钮相关的样式
      btn基本类
      不同的按钮颜色
      btn-danger
      btn-warning
      btn-success 绿
      btn-info 藏青
      btn-primary
      btn-dark
      btn-light
      btn-secondary 深灰
      不同边框颜色的按钮
      btn-outline-danger/warning.....
      其他按钮样式
      btn-lg 大按钮
      btn-sm 小按钮
      btn-block 块级按钮
      btn-link 链接按钮
    2. 图片
      rounded 0.25rem圆角
      rounded-circle 50%圆角
      img-thumbnail 缩略图,带边框,带圆角,有内边距
      img-fluid 图片可以缩放,但是最大不能超过原始尺寸
    3. 文字相关的class
      1. 文本颜色 text-muted(灰色)/danger/warning/info...
      2. 字号大小 .h1~.h6
      3. 字体加粗 .font-weight-bold/normal/light
      4. 斜体 font-italic
      5. 文本水平对齐 text-left/center/right/justify
        boot对文本对齐封装了响应式,没有封装justify
        text-*-left/center/right*取值:sm/md/lg/xl 向上兼容
        练习:模拟boot手写媒体查询,封装justify

你可能感兴趣的:(+,Bootstrap,bootstrap)