1 安装和基本使用

　　外文官网

　　中文官网

　　可以正常下载使用

　　有三个文件夹, 分别是css, fonts, js

bootstrap/

├── css/

│   ├── bootstrap.css

│   ├── bootstrap.css.map

│   ├── bootstrap.min.css

│   ├── bootstrap.min.css.map

│   ├── bootstrap-theme.css

│   ├── bootstrap-theme.css.map

│   ├── bootstrap-theme.min.css

│   └── bootstrap-theme.min.css.map

├── js/

│   ├── bootstrap.js

│   └── bootstrap.min.js

└── fonts/

    ├── glyphicons-halflings-regular.eot

    ├── glyphicons-halflings-regular.svg

    ├── glyphicons-halflings-regular.ttf

    ├── glyphicons-halflings-regular.woff

    └── glyphicons-halflings-regular.woff2

　　其中名字是min是压缩后的文件

　　一般引用都是使用本地的, 当然官网支持在线的

　　初步的使用如下

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <!--这个是支持移动设备优先-->

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

        <title>ch01</title>

        <link rel="stylesheet" href="css/bootstrap.min.css" />

        <script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>

        <script type="application/javascript" src="js/bootstrap.min.js"></script>

    </head>

    <body>

        <nav class="navbar navbar-inverse navbar-fixed-top">

            <div class="container">

                <div class="navbar-header">

                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

                        <span class="sr-only">Toggle navigation</span>

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                    </button>

                    <a class="navbar-brand" href="#">Project name</a>

                </div>

                <div id="navbar" class="collapse navbar-collapse">

                    <ul class="nav navbar-nav">

                        <li class="active">

                            <a href="#">Home</a>

                        </li>

                        <li>

                            <a href="#about">About</a>

                        </li>

                        <li>

                            <a href="#contact">Contact</a>

                        </li>

                    </ul>

                </div>

                <!--/.nav-collapse -->

            </div>

        </nav>

    </body>

</html>

　　更多参见官网

2 栅格系统

　　栅格系统是将页面等分为12份

　　栅格系统的参数

　　

　　具体使用范例就是

　　

　　

　　但是这由于左右还有空白, 所以原来的container可以换成container-fluid　

　　

　　

　　另外占多少格子的多少从小到大是自适应的

　　　　例如使用col-md-* 这个只有在中等及以上的时候, 显示是那个比例, 如果小于中等比例之后, 每个就独占一行了

　　　　所以要使得全部分辨率的显示都不变的话, 可以设置col-xs-*

　　可以使用col-*-offset-* 来左空格

　　

　　

　　列可以嵌套, 相当于把父类部分再等分成12份在用

　　

　　向右push向左pull

　　

　　不同分辨率的内容可以写在一起, 谁满足谁生效

　　

001-Bootstrap栅格系统的更多相关文章

  1. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

  2. Bootstrap 栅格系统(转载)

    源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...

  3. Bootstrap栅格系统（布局）

    栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...

  4. 初学bootstrap ---栅格系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

  6. 入门——Bootstrap栅格系统

    作为刚接触到Bootstrap框架的新手一枚,刚开始对Bootstrap中的栅格系统一脸懵逼,后来经过反复的上网查找资料以及自己一直在练习,总算对栅格系统了解个差不多,所以我将我所了解的当成是日记写下 ...

  7. Bootstrap栅格系统基本使用

    1.什么是栅格系统: 在Bootstrap中,它提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.栅格系统用于通过一系列的行(row ...

  8. Bootstrap 栅格系统初识

    以下理论内容copy自bootstrap中文网(一个不错的bootstrap学习网站). 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport) ...

  9. 第二百三十五节，Bootstrap栅格系统

    Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一．移动 ...

  10. Bootstrap 栅格系统 理解与总结

    Bootstrap 栅格系统 学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景. 只是Bootstrap的内容较多,新手往往不能很快 ...

随机推荐

  1. LM339组成的双限比较器

    通常是上限电压值与电源电压Vcc接近,下限电压值靠近0V.

  2. jQuery源代码 框架分析

    每个框架都有一个核心.全部的结构都是基于这个核心之上,结构建立好了之后,剩下的就是功能的堆砌. jQuery的核心就是从HTML文档中匹配元素并对其操作. 就跟一座大楼一样.让我们一步一步了解这座大厦 ...

  3. Uboot的串口下载文件命令：loads / loadb / loady

    1. loads loads [ off ] 通过串口,下载S-Rec文件到off位置 loads命令可以通过串口线下载S-Record格式文件. 2. loadb loadb [ off ] [ b ...

  4. JQuery 获取URL中传递的参数

    该方法基于JQuery,然后给方法传递URL中的参数名,返回参数值 (function($){    $.getUrlParam = function(name){        var reg = ...

  5. 转载 ---资深HR告诉你：我如何筛选简历与选择人员的

    资深HR告诉你:我如何筛选简历与选择人员的   有个公司HR看简历 先直接丢掉一半 理由是不要运气不好的应聘者. 当然这可能只是某些HR面对太多的简历产生了偷懒的情绪,但是不论是Manager,亦或是 ...

  6. SWT经常使用组件

    1button组件(Button) (1)Button组件经常使用样式 SWT.PUSHbutton SWT.CHECK多选button SWT.RADIO单选button SWT.ARROW箭头bu ...

  7. API自动化测试利器——Postman

    自从开始做API开发之后,我就在寻找合适的API测试工具.一开始不是很想用Chrome扩展,用的WizTools的工具,后来试过一次Postman之后就停不下来了,还买了付费的Jetpacks.推出T ...

  8. [URAL-1517][求两个字符串的最长公共子串]

    Freedom of Choice URAL - 1517 Background Before Albanian people could bear with the freedom of speec ...

  9. 【BZOJ3679】数字之积 DFS+DP

    [BZOJ3679]数字之积 Description 一个数x各个数位上的数之积记为f(x) <不含前导零>求[L,R)中满足0<f(x)<=n的数的个数 Input 第一行一 ...

  10. libEasyPlayer RTSP windows播放器SDK API接口设计说明

    概述 libEasyPlayer实现对RTSP直播流进行实时采集和解码显示,稳定,高效,低延时:解码可采用intel硬件解码和软件解码两种方式,能实时进行录像和快照抓图,OSD叠加等功能. API接口 ...