前端开发 09 Bootstrap框架-柚子小站

Bootstrap是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。目前最新版本是4.1.1.不过目前主要使用的版本是3.3.7版本,对应的英文官方页面是Bootstrap3官方页面,对应的中文站是Bootstrap中文网. 目前,已经有人开发了Bootstrap4中文站,开始用最新的Bootstrap4吧. 像Bootstrap框架还有很多的前端框架一样,从现在开始的主要学习方式就是自学.Bootstrap中文网的Bootstrap3页面内的导航条上有很多教学工具: 起步是对Bootstrap的基础以及安装做的介绍. 全局CSS样式相当于基础教学,介绍了所有样式. 组件是各种类型的外部图标,字体等等辅助Bootstrap样式的内容,也是构成Bootstrap的一部分. JavaScript组件介绍了Bootstrap的js文件里可供使用的内容.Bootstrap的JS模块是基于jQuery的,所以一般要将jQuery也导入到页面中来. 网站实例是一些用Bootstrap开发的经典页面,可以方便快速的使用到自己的页面上来.

开始使用Bootstrap

在Boostrap中文网的起步页面找到Bootstrap3的下载.对于一般开发,选择用于生产环境的 Bootstrap下载. 下载回来的Bootstrap是一个压缩包文件,解压后有三个目录,css目录为样式文件,fonts为字体文件及组件,js文件为js部分.使用Bootstrap需要将Bootstrap的css和js组件都导入页面.其中核心的css样式是css目录下的bootstrap.min.css文件,js组件是js目录下的bootstrap.min.js文件,今后开发的web页面的标准格式如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body> 
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script> 
</body> </html>

当然,在本地开发的时候,最好在本地下载一份jQuery和Bootstrap库,这样IDE可以检测到里边的内容,方便代码编写.内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>



<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

开始使用Bootstrap

Bootstrap的基本模板里边提到要加上三个标签,这是为了适配手机端以及以及IE EDGE浏览器,一般都要加上.下边来看Bootstrap的CSS样式的几个特点:

布局容器

所有的页面内容,或者栅格内容,都需要被包裹在.container或者.container-fluid容器里,也就是建立一个div标签,设置类为container后包裹页面内容. 注意,.container和.container-fluid不要互相嵌套. .container 类用于固定宽度并支持响应式布局的容器。 .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。通过测试可以看到,上边的container类会随着页面宽度自动调整,而container-fluid类始终占据总的宽度.

栅格

栅格系统是Bootstrap排版的关键,其核心思想是一行分为12列,可以指定列宽,在屏幕尺寸发生变化的时候,页面的布局也会在并排显示和上下显示之间变换. 达到这个效果必须使用一个row类(表示一行),其子元素是.col-xs-n,.col-sm-n,.col-md-n,.col-lg-n四个类其中的一种,一行使用同一类. 其中n一行内相加可以小于等于12,但不要超过12,否则会再起一行显示.xs,sm,md和lg表示屏幕宽度在某一点时,排版发生变化.对应关系是 xs = <768px, sm = ≥768px, md是992px,lg是1200px;意思是大于这个屏幕宽度,就放到一行显示,小于这个屏幕宽度,就竖向显示. 官网教程有个例子:可以说明问题,在屏幕宽度992这个阈值上,各个元素的排列会发生变化.

<div class="container">
    <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
    </div>
</div>

此外,还可以对一行采用不同的类定义,以此来达到不同的横向宽度下不同的显示效果:

<div class="container">
    .col-xs-6
    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <div class="row">
        <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>

    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>

    <!-- Columns are always 50% wide, on mobile and desktop -->
    <div class="row">
        <div class="col-xs-6">.col-xs-6</div>
        <div class="col-xs-6">.col-xs-6</div>
    </div>
</div>

这个自己分析了一下,第一部分定义了第一个元素是xs屏幕的时候占据12格子,也就是一行,在md模式下占据8个格子.第二个元素总是xs的时候占据6个宽度,md的时候占据8个. 当屏幕宽度大于992的时候,这两个元素在md模式下正好处于一行内.在屏幕缩小到小于992px的时候,就不按照md的类来了,而是按照xs的类,则此时第一个元素占据了整整一行,第二个元素宽度是6,被排到了第二行的一半长度. 同样,第二部分,屏幕宽度大于992的时候,正好宽度都是4,一行排3个,小于992的时候,前两个排一排.最后一个元素单独排一行的一半. 第三个则是只定义了xs时候的类,则一直是两个元素排在同一行. 有了这种定义方法,就可以在设置网页的时候,让网页的元素在较大的显示设备上水平铺开,而在较小的显示设备上上下显示. 像这个例子里的第一部分,如果想让第二个元素在小屏幕下移到下一行的时候居中显示,就需要同时加上两种大小的偏移,否则只会按照小的偏移计算.即

<div class="col-xs-6 col-xs-offset-3 col-md-4 col-md-offset-0">.col-xs-6 .col-md-4

同时发现,其实从小屏幕到大屏幕,设置是一层一层覆盖的,比如只定义了xs的类,则这行总是按照固定的方式显示,只有定义了高一层的比如md类,才会在缩放的时候有效果,偏移也是一样,如果要实现各种模式下的不同偏移,不能只定义想要的模式下的偏移,必须把各个模式的偏移都定义上,哪怕是0. 这里引入了列偏移的概念.很好理解,就是往右偏移的格数,对应的分辨率就有对应的偏移类-offset-n. 栅格系统还支持嵌套,只需要在需要嵌套的地方再定义row和下边的子元素即可:

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

嵌套的内容的列不能超过12,其实一般使用已经足够,也无需特意占满12. .clearfix类用于重置一行,比如一行的高度特别高的时候,如果不加上clearfix,则内容会重叠起来.这个时候插入一个空的div标签.clearfix类,相当于一个不显示出来的强制换行.比如:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3Resize your viewport or check it out on your phone for an
            example.
        </div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        <div class="clearfix visible-xs-block"></div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    </div>
</div>

其中带有clearfix的这行,可以按照需要插入到不同的地方,如果不插,由于sm四个元素都设置了3,当屏幕很小的时候由于高度变化,由于是设置在同一个row里,因此元素会堆叠,导致两个6宽的元素叠在一起.而我们的本意是在xs的时候一行显示两列,因此可以在第二个元素后边放一个空的clearfix类,这样就强制换行了. 当然,还一种方法就是把这个例子改成两列,但这个不在此处的讨论范围内. 列排序用push和pull类即可比较简单的改变顺序.

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

了解了栅格系统之后,其实剩下的组件就是具体使用的时候来操作. 后续发现了一个不错的教学Bootstrap4基础的网站菜鸟教程,后边就通过这个网站来学习. 后边就是学习前后端交互,正式开始入门编程了.