bootstrap 学习笔记（1）---介绍bootstrap和栅格系统

时间 2019-11-11

原文原文链接

　　学习前端许久，对于布置框架和响应浏览器用html 和javascript 写的有点繁琐，无心间看到这个框架，以为挺好用的就开始学习了，可是这个框架上面有不少知识，不是全部的都要学的，故将学习笔记和以为重点的东西写下来，以便之后学习。javascript

Bootstrap 是一个相应式的布局的一个前端框架。
bootstrap 学习有如下步骤：
   一、bootstrap 安装，
   二、bootstrap 全局css 样式
   三、bootstrap css组件
   四、bootstrap javascript 插件

bootstrap 安装：官网下载压缩包解压到项目中，而后在项目文件中引入下面三行代码：
   <link rel="stylesheet" href="bs/css/bootstrap.css" />
   <script src="bs/js/jquery-3.1.1.js"></script>
   <script src="bs/js/bootstrap.js"></script>

全局css 样式：css

　a.必须是html5文档类型<!DOCTYPE html>
   b.移动设备优先经过为视口（viewport）设置 meta 属性为 user-scalable=no 能够禁用其缩放（zooming）功能。
   这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感受。注意，这种方式咱们并不推荐全部网站使用，
   仍是要看你本身的状况而定！(这被称为视宽)
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   布局容器：html

Bootstrap 须要为页面内容和栅格系统包裹一个 .container 容器。咱们提供了两个做此用处的类。注意，因为 padding等属性的缘由，这两种容器类不能互相嵌套。前端

栅格系统：
  一、Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增长，<div class="container"> ... </div>

   系统会自动分为最多12列。它包含了易于使用的预约义类，还有强大的mixin 用于生成更具语义的布局。
   比较有用的例子：class="col-md-" 意思是将列分红12格子，col-md-num 中num的值是每一个元素占据多少格子，12/num算出有多少个元素。
   row 1行12列
   <div class="row">
       <div class="col-md-3">
           <img src="images/1.png" width="100%" />
       </div>
       <div class="col-md-3">
           <img src="images/1.png" width="100%" />
       </div>
       <div class="col-md-3">
           <img src="images/1.png" width="100%" />
       </div>
       <div class="col-md-3">
           <img src="images/1.png" width="100%" />
       </div>
   </div>

   用下面的方法产生临时图片：
   <div class="row">
       <div class="col-md-3">
           <img src="holder.js/100x300" />
       </div>
   </div>
   二、前面的几个不要，使图片前面空几个格子用：col-md-offset-num
   eg:

   <div class="row">
       <div class="col-md-3">
           <img src="images/1.png" width="100%" />
       </div>
       <div class="col-md-3">
           <img src="images/1.png" width="100%" />
       </div>
       <div class="col-md-3 col-md-offset-3">
           <img src="images/1.png" width="100%" />
       </div>
   </div>
   三、有个列排序不必看，用这个也能够实现：pull-right   pull-left
   eg:
   <div class="row">

       <div class="col-md-3 pull-left">
           <img src="images/1.png" width="100%" />
       </div>

       <div class="col-md-3 pull-left">
           <img src="images/1.png" width="100%" />
       </div>

   </div>html5