学习前端许久，对于布置框架和响应浏览器用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>

bootstrap 学习笔记（1）---介绍bootstrap和栅格系统的更多相关文章

  1. bootstrap学习笔记<八>（bootstrap核心布局风格——栅格系统）

    栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...

  2. bootstrap学习笔记<一>（bootstrap用法）

    首先引入bootstrap官网链接:http://www.bootcss.com/ bootstrap 3下载地址:http://v3.bootcss.com/getting-started/#dow ...

  3. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  4. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  5. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  6. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  7. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  8. ASP.NET Core Web开发学习笔记-1介绍篇

    ASP.NET Core Web开发学习笔记-1介绍篇 给大家说声报歉,从2012年个人情感破裂的那一天,本人的51CTO,CnBlogs,Csdn,QQ,Weboo就再也没有更新过.踏实的生活(曾辞 ...

  9. Bootstrap学习笔记-栅格系统

    栅格系统的原理就是在这个界面中这个栅格被分成12个格子,你根据自己的想要的布局就把这个界面分割成你想要的部分就行了.一般如果我们用电脑作为显示器的我们用的样式是col-md 如果你用的显示期变小的情况 ...

随机推荐

  1. Win7下Nginx的安装与配置

    1.  下载nginx1.9.9版本:(版本随时间而变,下载最新即可) http://nginx.org/download/nginx-1.9.9.zip 2. 解压软件到对应位置,并重命名文件夹为n ...

  2. 关于#!/usr/bin/env python 的用法

    在linux的一些脚本里,需在开头一行指定脚本的解释程序,如: !/usr/bin/env python 再如: !/usr/bin/env perl 那么 env到底有什么用?何时用这个呢?脚本用e ...

  3. GridView数据绑定控件的模版列时设置显示的格式

    形式 语法 结果 数字 {0:N2} 12.36   数字 {0:N0} 13   货币 {0:c2} $12.36   货币 {0:c4} $12.3656   货币 "￥{0:N2}&q ...

  4. 手把手教你如何利用Meterpreter渗透Windows系统

    在这篇文章中,我们将跟大家介绍如何使用Meterpreter来收集目标Windows系统中的信息,获取用户凭证,创建我们自己的账号,启用远程桌面,进行屏幕截图,以及获取用户键盘记录等等. 相关Payl ...

  5. C 标准库 - <stdarg.h>

    C 标准库 - <stdarg.h> 简介 stdarg.h 头文件定义了一个变量类型 va_list 和三个宏,这三个宏可用于在参数个数未知(即参数个数可变)时获取函数中的参数. 可变参 ...

  6. 设计模式之中介者模式(Mediator)摘录

    23种GOF设计模式一般分为三大类:创建型模式.结构型模式.行为模式. 创建型模式抽象了实例化过程.它们帮助一个系统独立于怎样创建.组合和表示它的那些对象.一个类创建型模式使用继承改变被实例化的类,而 ...

  7. Python中的列表、元祖、字典

    一.列表 一组有序项目的集合.可变的数据类型[可进行增删改查] 列表是以方括号"[]"包围的数据集合,不同成员以","分隔. 列表中能够包括不论什么数据类型,也 ...

  8. Solaris 下解决上网问题以及远程登录问题

    解决乱码问题 参考文章 http://www.jb51.net/os/Solaris/1656.html solaris 显示乱码的解决方法 现象: 利用命令 : LANG=zh; export LA ...

  9. UVA 11578 - Situp Benches（dp)

    题目链接:11578 - Situp Benches 题意:健♂身♂房有两个仰卧起坐坐垫,每次调整角度要花费10元/10度,每次使用要花费15,如今给定n个人的时间顺序,和所希望的角度,求最少花费 思 ...

  10. [javase学习笔记]-8.7 静态代码块

    这一节我们看一个比較特殊的概念,那就是静态代码块. 前面我们也提到过代码块,就是一段独立的代码空间.那么什么是静态代码块呢?说白了,就是用statickeyword修饰的代码块. 我们来看一个样例: ...