2天学会Bootstrap，让框架不再成为你的难题

最新推荐文章于 2024-05-03 02:53:36 发布

Z.Meng

最新推荐文章于 2024-05-03 02:53:36 发布

阅读量931

点赞数 1

分类专栏： Bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/zm17671443092/article/details/107988746

版权

Bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

2天学会Bootstrap，让框架不再成为你的难题

在这里插入图片描述

前端框架：

JS框架：基于js的，如：jquery库， vue ， react
UI框架：基于css的，封装好了成千上万个class，如：bootstrap ， mui ，elementUI

一.什么是Bootstrap？

1.Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

2.Bootstrap框架是一个半成品软件，开发人员可以在框架基础上进行开发，简化编码，上手简单灵活，加快了web开发的速度，以及更为完善的人性化的网站风格，并兼容大多数jQuery插件。

3 Bootstrap框架的优缺点

优点：

（1）扩展性强，能够更好的与现实的web开发项目结合。

（2）该框架不断适应web技术的发展。

（3）比较成熟，在大量的项目中充分的使用和测试。

（4）拥有完善的文档，使用起来更方便。

（5） Bootstrap提供了非常豐富的组件与插件，组件包含小图标、按钮组、菜单导航、标签页等等[3]，并接受定制。

（6）扩展性强，兼容各种脚本插件。

（7）拥有现成UI组件，可以快速搭建网页页面。

（8）前端处理简洁，在Blog系统搭建过程中使用方便。

（9）当网站不需要支持ie6.减少了兼容代码的处理。

（10） Bootstrap框架为用户提供了一套响应式移动设备优先的流式栅格系统[2]，拥有完备的框架结构，整体效果和谐，对谷歌，火狐，IE等浏览器均可支持，项目开发方便快捷。

缺点：

（1）对于有特殊需求的使用者，bootstrap框架会对其带来较大的麻烦，需要做大量的css重写来改善非bootstrap“风格”的样式，导致该网站失去使用框架的意义。

（2）会有兼容问题，对底版本的浏览器兼容性不太好，页面显得更加死板，影响用户体验。

（3）js插件在导航页面直接切换到相应位置中，需要用js丰富它的内容，否则效果像是一个锚点，并没有滚动动画，不能尽如人意。

（4）定制会产生大量代码冗余，使用者利用css把原有的样式覆盖，当修改较多时被覆盖的代码没有了使用价值。

（5）Bootstrap框架设计使得HTML不再是语义及表现和内容分离的，最终会导致一堆充斥着class的DOM元素，不遵循最佳实践。部分开发人员会觉得相当刺眼，因为对扩展性，重用性和维护更是个挑战。

（6）当你突然要投入到相对较庞大的项目当中，想要通过Twitter Bootstrappy 直接享受其所有的好处，你会发现它和已存在设置发生相冲突的问题，而这些问题也将对项目原有的HTML，层叠样式表和Java脚本有较多的影响。于此同时，会发现在这个框架当中的某些资源条件，需要通过删除或者替换才能到达想要的效果，这当中必须要经过对该项目进行大量的计算工作来得出。Bootstrap在使用过程中出现一些修复奇怪的错误增加你额外的工作量是不可避免的，而这些与使用者一开始想要使用一个完整而简洁的框架是有所违背的。

（7）若想使用Twitter Bootstap一个比较完整齐全的功能需要大量的时间，同时，你还需要考虑自身使用的市场范围，并不是所有地区数据加载的时间限都是相同的，对于一些互联网有条件限制的地区，数据传达的速度缓慢不尽人意，因为Twitter Bootstrap所包含的内容较多，其中包括126kb的CSS和29kb的JavaScript。使用时会耗费较大的时间来加资源。当然，也有一些地区是相对自由的，不存在这方面的问题。虽然Twitter Bootstrap能建立具有吸引力和响应式的网站，不过一些手机用户在这块因为加载速度较慢和电量消耗较大的脚本而不能使用。

（8）不支持SASS。BootStrap使用Less构建，原生不支持Compass和SASS。SASS是带有一个类似于Compass的框架，使用它好像完全不需要过多的考虑。一些人建立了Compass gem的Bootstrap，但使用Less会更加方便。

（9）类似的Twitter Bootstrap的很多。由于Twitter Bootstrap比好前沿，使用者也相对较多，导致很多开发人员都在使用的过程中，遇到一些时间限制等问题时被迫使用了很多原有的 Bootrasp风格，从而导致很多类似的Twitter Bootstrap创建了。在有限的时间内，在Bootstrap框架中想要有所突破，自主创新很难的，往往更多的是放弃的结局。

二.如何使用Bootstrap？

2.1.在官网下载Bootstrap，下载后有三个文件夹，将这三个文件夹复制到项目中创建html页面

官网地址：https://www.bootcss.com/

2.2.引入必要资源

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

可以用网络资源cdn，也可以用本地的Bootstrap文件

    <!-- Bootstrap -->
    <link href="bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet">

三.响应式布局

3.1同一套页面可以兼容不同分辨率的设备，按照我的想法是随着页面的缩小而调整页面布局，随着页面的增大也调整布局使之适应页面的内容。

简单来讲就是： 1套代码适应多个终端（PC，pad，phone）根据屏幕的宽度，展示（响应）出不同的样式

3.2响应式如何编写？

*流式布局 float：left ，display：inline-block

*CSS3媒体查询：

①媒体查询根据设备的不同，加载不同的样式

②媒体查询根据分辨率的不同，加载不同的样式

③响应式中的编写单位：相对单位：百分比和rem

④ 栅格系统

四. 栅格系统

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

4.2栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

①容器的分类：container：两边有空白，并且居中，container-fluid：每一种设备都是100%宽度

②定义行样式：row，将一行平均分为12个格子，可以指定元素占几个格子，（row必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）

③定义列样式：col，内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素

④在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。

超小屏幕xs（手机，小于 768px） <768px

小屏幕sm（平板，大于等于 768px） >=768px&& <992px

中等屏幕md（桌面显示器，大于等于 992px） >=991px&&<1200px

大屏幕lg（大桌面显示器，大于等于 1200px）>=1200px

注意事项：

①一行中如果列数超出12，那么就会自动换行

②栅格类属性可以向上兼容

③如果真实设备的宽度小于了设置栅格属性的设备代码的最小值，会一个元素占满一整行。

了解以上概念以后可以做一个简单的响应式demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.css">
    <style>
        div{
            border: 1px solid #000000;
        }
    </style>
</head>
<body>
	 <!-- 超小屏幕xs（手机，小于 768px）  <768px  -->    
     <!-- 小屏幕sm（平板，大于等于 768px） >=768px&& <992px  -->
     <!-- 中等屏幕md （桌面显示器，大于等于 992px） >=991px&&<1200px  -->
     <!-- 大屏幕lg （大桌面显示器，大于等于 1200px）>=1200px  -->

    <!-- container类用于固定宽度并支持响应式布局的容器。 -->
    <div class="container"> 
    <!-- 行（row）”必须包含在 .container （固定宽度）或 .container-fluid（100% 宽度） -->
      <div class="row">
          <!-- 一行拥有12列，或是12等分,超过 -->
          <!-- 在中等屏幕时占据3列col-md-3,在小屏幕时占据4列col-sm-4，在超小屏幕时占据12列(一行)col-xs-12 -->
          <div class="col-md-3  col-sm-4 col-xs-12">
            <h5>左侧附加导航栏</h5><br>
            <p>
                Londoners are under starter's orders as the city gets ready for the Olympic Games, which will begin one year today.
                To mark the start of the 366-day countdown (2012 is a leap year), special events are planned for today.
                The design of the Olympic medals will be unveiled tonight in a live ceremony from Trafalgar Square.
            </p>
          </div>
          <!-- 在中等屏幕时占据6列col-md-6,在小屏幕时占据8列col-sm-8，在超小屏幕时占据12列(一行)col-xs-12 -->
          <div class="col-md-6 col-sm-8 col-xs-12">
              <!-- 列中可继续添加行 -->
             <div class="row">
              <!-- 在中等屏幕时占据3列col-md-3,在小屏幕时占据3列col-sm-3，在超小屏幕时占据6列col-xs-6 -->
                 <div class="col-md-3 col-sm-3 col-xs-6">
                     <!-- 响应式图片img-responsive -->
                     <img src="images/1.jpg" alt="" class="img-responsive">
                 </div>
                 <div class="col-md-3 col-sm-3 col-xs-6">
                    <img src="images/2.jpg" alt="" class="img-responsive">
                </div>
                <div class="col-md-3 col-sm-3 col-xs-6">
                    <img src="images/3.jpg" alt="" class="img-responsive">
                </div>
                <div class="col-md-3 col-sm-3 col-xs-6">
                    <img src="images/4.jpg" alt="" class="img-responsive">
                </div>
             </div>
            中部主体内容
            <p>
                Londoners are under starter's orders as the city gets ready for the Olympic Games, which will begin one year today.
                To mark the start of the 366-day countdown (2012 is a leap year), special events are planned for today.
                The design of the Olympic medals will be unveiled tonight in a live ceremony from Trafalgar Square.
                Londoners are under starter's orders as the city gets ready for the Olympic Games, which will begin one year today.
                To mark the start of the 366-day countdown (2012 is a leap year), special events are planned for today.
                The design of the Olympic medals will be unveiled tonight in a live ceremony from Trafalgar Square.
             </p>
          </div>

            <!--在中等屏幕时占据3列col-md-3，在小屏幕时隐藏hidden-sm,在超小屏幕时隐藏hidden-xs -->
          <div class="col-md-3 hidden-sm hidden-xs">
            <h5>右边可有可无的广告</h5><br>
            <p>
               Londoners are under starter's orders as the city gets ready for the Olympic Games, which will begin one year today.
               To mark the start of the 366-day countdown (2012 is a leap year), special events are planned for today.
               The design of the Olympic medals will be unveiled tonight in a live ceremony from Trafalgar Square.
               The design of the Olympic medals will be unveiled tonight in a live ceremony from Trafalgar Square.
            </p>
          </div>
      </div>
    </div>
</body>
</html>

也可以通过媒体查询方式完成：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .demo{
                width: 1200px;
                height: 800px;
                margin: 0px auto;
                box-sizing: border-box;
            }
        .left{
            width: 20%;
            height: 100%;
            border: 1px solid #000000;
            float: left;
            }
        .content{
            width: 60%;
            height: 30%;
            border: 1px solid #000000;
            float: left;
        }
        .content img{
            width: 150px;
            height: 100px;

        } 
        .right{
            width: 19%;
            height: 38%;
            float: left;
            border: 1px solid #000000;
        } 
        @media screen and (max-width: 920px) and (min-width: 720px) {
         .demo{
                width: 800px;
                height: 800px;
                margin: 0px auto;
                box-sizing: border-box;
            }
        .left{
            width: 30%;
            height: 100%;
            border: 1px solid #000000;
            float: left;
            }
        .content{
            width: 69%;
            height: 35%;
            border: 1px solid #000000;
            float: left;
        }
        .content img{
            width: 100px;
            height: 100px;
            padding: 16px;

        } 
        .right{
                display: none;
            }
        }
        @media screen and (max-width: 719px) and (min-width: 500px) {
         .demo{
                width: 500px;
                height: 800px;
                margin: 0px auto;
                box-sizing: border-box;
            }
        .left{
            width: 100%;
            height: 40%;
            border: 1px solid #000000;
            float: left;
            }
        .content{
            width: 100%;
            height: 60%;
            border: 1px solid #000000;
            float: left;
        }
        .content img{
            width: 200px;
            height: 100px;
            padding: 20px;
        } 
        .right{
                display: none;
            }

        }
    </style>
</head>
<body>
    <div class="demo">
        <div class="left">
            <h5>左侧附加导航栏</h5><br>
             <p>
                Londoners are under starter's orders as the city gets ready for the Olympic Games, which will begin one year today.
                To mark the start of the 366-day countdown (2012 is a leap year), special events are planned for today.
                The design of the Olympic medals will be unveiled tonight in a live ceremony from Trafalgar Square.
             </p>
        </div>
        <div class="content">
            <img src="1.jpg" alt="">
            <img src="2.jpg" alt="">
            <img src="3.jpg" alt="">
            <img src="4.jpg" alt="">
            <h5>中部主体内容</h5><br>
            <p>
                Londoners are under starter's orders as the city gets ready for the Olympic Games, which will begin one year today.
                To mark the start of the 366-day countdown (2012 is a leap year), special events are planned for today.
                The design of the Olympic medals will be unveiled tonight in a live ceremony from Trafalgar Square.
             </p>
        </div>
        <div class="right">
            <h5>右边可有可无的广告</h5><br>
             <p>
                Londoners are under starter's orders as the city gets ready for the Olympic Games, which will begin one year today.
                To mark the start of the 366-day countdown (2012 is a leap year), special events are planned for today.
                The design of the Olympic medals will be unveiled tonight in a live ceremony from Trafalgar Square.
             </p>
        </div>
    </div>
</body>
</html>

编写响应式（自适应）网站需要注意的点：

1.必须设置网站的视口

viewport可视化视口，device-width定义输出设备的屏幕可见宽度，initial-scale=1.0可视区域的缩放级别

//viewport可视化视口，device-width定义输出设备的屏幕可见宽度，可视区域的缩放级别，
<meta name="viewport" width=device-width,initial-scale=1.0">

最后附带一个面试题：

面试：响应式布局和自适应布局有什么区别？

响应式（分辨率）： 1套代码适应多个终端（PC，pad，phone）根据屏幕的宽度，展示（响应）出不同的样式
自适应（设备）：多套代码根据不同的终端去加载不同的代码

喜欢小编的可以关注点一点。

小编虽然不能陪你一生，但能让你的基础知识满满登登。

Z.Meng

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

2天学会Bootstrap，让框架不再成为你的难题

2天学会Bootstrap，让框架不再成为你的难题

前端框架：

JS框架：基于js的，如：jquery库 ， vue ， reactUI框架：基于css的，封装好了成千上万个class，如：bootstrap ， mui ，elementUI

一.什么是Bootstrap？

1.Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

2.Bootstrap框架是一个半成品软件，开发人员可以在框架基础上进行开发，简化编码，上手简单灵活，加快了web开发的速度，以及更为完善的人性化的网站风格，并兼容大多数jQuery插件。

3 Bootstrap框架的优缺点

二.如何使用Bootstrap？

2.1.在官网下载Bootstrap，下载后有三个文件夹，将这三个文件夹复制到项目中创建html页面

官网地址：https://www.bootcss.com/

2.2.引入必要资源

三.响应式布局

3.1同一套页面可以兼容不同分辨率的设备，按照我的想法是随着页面的缩小而调整页面布局，随着页面的增大也调整布局使之适应页面的内容。

简单来讲就是： 1套代码 适应多个终端（PC，pad，phone） 根据屏幕的宽度，展示（响应）出不同的样式

3.2响应式如何编写？

*流式布局 float：left ，display：inline-block

*CSS3媒体查询：

①媒体查询根据设备的不同，加载不同的样式

②媒体查询根据分辨率的不同，加载不同的样式

③响应式中的编写单位：相对单位：百分比和rem

④ 栅格系统

四. 栅格系统

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

4.2栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

①容器的分类：container：两边有空白，并且居中，container-fluid：每一种设备都是100%宽度

②定义行样式：row，将一行平均分为12个格子，可以指定元素占几个格子，（row必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）

③定义列样式：col，内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素

④在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。

超小屏幕xs（手机，小于 768px） <768px

小屏幕sm（平板，大于等于 768px） >=768px&& <992px

中等屏幕md（桌面显示器，大于等于 992px） >=991px&&<1200px

大屏幕lg（大桌面显示器，大于等于 1200px）>=1200px

注意事项：

①一行中如果列数超出12，那么就会自动换行

②栅格类属性可以向上兼容

③如果真实设备的宽度小于了设置栅格属性的设备代码的最小值，会一个元素占满一整行。

了解以上概念以后可以做一个简单的响应式demo：

也可以通过媒体查询方式完成：

编写响应式（自适应）网站需要注意的点：

1.必须设置网站的视口

最后附带一个面试题：

面试：响应式布局和自适应布局有什么区别？

JS框架：基于js的，如：jquery库， vue ， react
UI框架：基于css的，封装好了成千上万个class，如：bootstrap ， mui ，elementUI

简单来讲就是： 1套代码适应多个终端（PC，pad，phone）根据屏幕的宽度，展示（响应）出不同的样式