[技术博客]采用Bootstrap框架进行排版布局

[技术博客]采用Bootstrap框架进行排版布局

网页的前端框架有不少不少种，好比Bootstrap、Vue、Angular等等，在最开始其实并无考虑到框架这回事，开始阅读往届代码时发现其部分采用了Bootstrap框架，所以决定沿用Bootstrap框架。Bootstrap框架可能并非太优秀，可是其有一个鲜明的特色就是，它是以移动端为优先的，所以在移动端会产生比较好的访问效果。

Bootstrap简介

​ Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。Bootstrap最为著名的特色就是移动设备优先，Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，将屏幕分割为12列，在此基础上，能够采用Bootstrap所提供的各类布局组件和插件，就能知足绝大多数的网页需求。

全局采用Bootstrap

在Alpha阶段中，咱们并无刻意追求网页样式，但因为部分采用了Bootstrap框架，最终网页在移动端的显示也是能看得过去的。在Beta阶段咱们转入一名同窗来作UI设计，在最初调整样式时，咱们打算放弃掉Bootstrap框架，可是发如今调整样式的时候很是吃力，同时又考虑到移动端适配问题，最终和UI设计沟通后，咱们打算全局采用Bootstrap，UI设计也针对Bootstrap进行设计。

全局采用Bootstrap的好处在于，可以较好的进行排版，同时UI设计对于移动版样式也不须要设计的过于详细，只须要提供相关布局，在进行PC端排版的时候就可以同时完成移动端排版。

Bootstrap排版布局

Bootstrap采用的是流式网格系统，所以排版布局是也是基于网格系统排版。其网格系统采用了行与列来完成工做。

• 整个屏幕被分为12列，每一个元素的宽度能够采用.col-n 的class来 进行控制。同时对于不一样的设备，又分为

  • .col-n：屏幕宽度小于768px，默认为移动端，适用于手机
  • .col-sm-n：屏幕宽度大于768px，小于992px，适用于平板
  • .col-md-n：屏幕宽度大于992pxpx，小于1200px，适用于小型PC、笔记本电脑
  • .col-lg-n：屏幕宽度大于1200px，小于992px，适用于大型PC

  所以在对应的元素中添加class就能够设定好不一样的宽度。

• 因为默认的元素都是采用列垂直布局，就必需要用行来进行控制。在元素中添加.row 的class就能够实现其内部元素的横向排列。值得注意的是，.row必须被包含在.container中，container就是一个容器，必须在容器中划分行。 下面即为Bootstrap的布局演示，在引入bootstrap就就能体现出来

  <div class="container">
     <div class="row">
        <div class="col-md-4 col-12">移动端占用12列，PC占据4列</div>
        <div class="col-md-8 col-12">移动端占用6列，PC占据8列</div>      
     </div>
  </div>

Bootstrap排版布局

若是不采用Bootstrap其他的组件和插件，只打算用它来进行排版，到这里就能够基本使用Bootstrap进行排版了。采用Bootstrap排版时，就不须要对组件的位置进行各类各样的调整，好比由UI设计所提供的网页设计里，各个元素的位置都是以px为单位，给出与上边界和下边界的距离，在调整样式时须要常常计算组件的具体位置，很是吃力，同时采用px时又不能较好的适配移动端，对于移动端页面可能须要从新编写。可是采用了Bootstrap后，直接用行列布局同时肯定好在PC端和移动端的元素位置，而后只须要细调元素的样式便可，固然须要UI设计时就采用列布局，不然仍是会存在困难。

最终的效果

在PC端的效果：

在移动端的效果：

平板下的效果：

能够看到在移动端下，也可以充满整个屏幕，近似于PC的显示，较好的显示各个元素，不须要用户去放大、左右拖动便可预览到整个网页的效果。对于复杂网页，一样能作到较好的适配，很是方便用户的使用。

PC端：

手机端：

缺点

尽管看上去很好用，事实上也很好用，可是其效果可能仍是比不上老老实实从新协议一个移动版样式，仍是由于Bootstrap的局限性。基础布局是以PC端为基础，而后调整其移动端布局，可是仍然存在着某些状况下，一些组件的位置不可能实现设计中所应该在的位置。同时Bootstap每一列的左右都会有15px的空余，致使在移动端实现某些较为紧凑的排列时有点麻烦，我常常直接将其用CSS来覆盖掉。还有部分Bootstrap组件的样式始终没法被css覆盖，指明分页组件，将其居中显示花费了好久，不少方法都没法将其居中显示。但整体来讲，对于咱们当心课程网站的开发，使用Bootstrap完成双端排版仍是比较简单省力的，毕竟从新编写页面对UI设计者和前端代码撰写者来讲都是比较麻烦的一件事。