bootstrap 学习笔记(1)---介绍bootstrap和栅格系统

时间:2022-02-21 01:30:56

  学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得重点的东西写下来,以便以后学习。

Bootstrap  是一个相应式的布局的一个前端框架。
bootstrap 学习有以下步骤:
    1、bootstrap 安装,
    2、bootstrap 全局css 样式
    3、bootstrap css组件
    4、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 样式:

 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">
   布局容器:

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding等属性的原因,这两种 容器类不能互相嵌套。

<div class="container">
...
</div>
栅格系统:
  1、Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,

系统会自动分为最多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="data:images/1.png" width="100%" />
        </div>
        <div class="col-md-3">
            <img src="data:images/1.png" width="100%" />
        </div>
        <div class="col-md-3">
            <img src="data:images/1.png" width="100%" />
        </div>
        <div class="col-md-3">
            <img src="data:images/1.png" width="100%" />
        </div>
    </div>
    
    用下面的方法产生临时图片:
    <div class="row">
        <div class="col-md-3">
            <img src="holder.js/100x300" />
        </div>
    </div>
    2、前面的几个不要,使图片前面空几个格子用:col-md-offset-num
    eg:

<div class="row">
        <div class="col-md-3">
            <img src="data:images/1.png" width="100%" />
        </div>
        <div class="col-md-3">
            <img src="data:images/1.png" width="100%" />
        </div>
        <div class="col-md-3 col-md-offset-3">
            <img src="data:images/1.png" width="100%" />
        </div>
    </div>
    3、有个列排序没必要看,用这个也可以实现:pull-right   pull-left
    eg:
    <div class="row">
        
        <div class="col-md-3 pull-left">
            <img src="data:images/1.png" width="100%" />
        </div>
        
        <div class="col-md-3 pull-left">
            <img src="data:images/1.png" width="100%" />
        </div>
        
    </div>