bootstrap （JS前端框架）

最新推荐文章于 2024-05-31 10:04:55 发布

xuemen11

最新推荐文章于 2024-05-31 10:04:55 发布

阅读量837

点赞数 20

文章标签：前端 bootstrap html

本文链接：https://blog.csdn.net/xuemen11/article/details/136640871

版权

Bootstrap 是前端UI响应式框架。

什么是UI？ user image (用户界面)

什么是响应式屏幕尺寸的变化，让页面有不同的布局效果，界面跟随屏幕尺寸变化而变化

（就是有不同的版本效果）

一.bootstrap的作用

1.提高了开发效率响应式项目的效率

2.提供了大量精美的组件

二.如何使用bootstrap

1、下载bootstrap相关的文件，在官网中下载bootstrap源码 (就是把css和js引入项目)

2、看文档复制组件的html代码、修改代码

3、布局、组件、工具类

三.响应式布局的一些网站：

简书 - 创作你的创作简书是一个优质的创作社区，在这里，你可以任性地创作，一篇短文、一张照片、一首诗、一幅画……我们相信，每个人都是生活中的艺术家，有着无穷的创造力。https://www.jianshu.com/ 云悦读 - 阅读使人自由阅读使人自由，分享也是一种态度。http://www.iydu.net/ Bootstrap中文网Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。目前，Bootstrap最新版本为5.0 。Bootstrap中文网致力于为广大国内开发者提供详尽的中文文档、代码实例等，助力开发者掌握并使用这一框架。https://www.bootcss.com/

在bootstrap官网上，不同的屏幕尺寸，页面有不同的布局效果（特大屏幕，大屏幕，中屏幕，小屏幕，特小屏幕）

四.pc端布局（通栏|版心）

京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。https://www.jd.com/

五.移动端布局（百分比布局|流式布局）

在不同的设备屏幕下，有着相同的布局效果

淘宝淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！https://main.m.taobao.com/

六. UI响应式原理

 /* 特小屏幕  最大是575*/
      @media (max-width: 575px) {
        body {
          background-color: red;
        }
        .title-1 {
          display: block;
        }
      }

      /* 小屏幕  (大于等于576px  小于等于 767px) */
      @media (min-width: 576px) and (max-width: 767px) {
        body {
          background-color: blue;
        }
        .title-2 {
          display: block;
        }
      }

      /* 中等屏幕  (大于等于768px  小于等于 991px) */
      @media (min-width: 768px) and (max-width: 991px) {
        body {
          background-color: green;
        }
        .title-3 {
          display: block;
        }
      }
      /* 大屏  (大于等于992px  小于等于1199px) */
      @media (min-width: 992px) and (max-width: 1199px) {
        body {
          background-color: deepskyblue;
        }
        .title-4 {
          display: block;
        }
      }
      /* 特大屏幕（大于等于1200px）最小是1200 */
      @media (min-width: 1200px) {
        body {
          background-color: pink;
        }
        .title-5 {
          display: block;
        }
      }

七.栅格系统（行和列的布局方式）

Extra small （特小）

Small (小 sm)

≥576px

Medium (中等 md)

≥768px

Large (大 lg)

≥992px

Extra large (特大 xl)

≥1200px

版心容器类名 .container 每一行的类名 .row 每一列的类名 col

col-sm-* 小屏幕 col-md-* 中等屏幕 col-lg-* 大屏幕 col-xl-* 特大屏幕

<div class="container box">
  <div class="row mt-3" >
    <!-- 再大也是最大的比例，再小就是自动变特小一列 -->
    <!-- 最小一行两列   最中一行3列   最大一行4列 -->
    <div class="col-sm-6 col-md-4 col-lg-3">1</div>
    <div class="col-sm-6 col-md-4 col-lg-3">2</div>
    <div class="col-sm-6 col-md-4 col-lg-3">3</div>
    <div class="col-sm-6 col-md-4 col-lg-3">4</div>
    <div class="col-sm-6 col-md-4 col-lg-3">5</div>
    <div class="col-sm-6 col-md-4 col-lg-3">6</div>
    <div class="col-sm-6 col-md-4 col-lg-3">7</div>
    <div class="col-sm-6 col-md-4 col-lg-3">8</div>
  </div>


  <div class="row mt-3">
    <!-- 占  5/12 -->
    <div class="col col-lg-5">55</div> 
     <!-- 占  7/12 -->
    <div class="col col-lg-7">77</div>
  </div>
</div>