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. Chrome 插件 CrxMouse 去除后门优化版

    说明 CrxMouse 是一款挺不错的 Chrome 插件.仅仅是据说这个插件会在后台偷偷的上传用户的浏览数据,无论上传的内容是不是涉及隐私数据,总让人认为不放心,可是因为插件本身功能还是挺好用的,所 ...

  2. SAS学习经验总结分享：篇五-过程步的应用

    之前已经介绍过BASE SAS分为数据步和过程步,过程步是对数据步生成的数据集进行分析和处理,并挖掘数据信息,写出分析报告做总结评价. (本文为原创,禁止复制或转载,转载务必标明出处:http://w ...

  3. nightwatch 切换窗口

    .switchWindow() Change focus to another window. The window to change focus to may be specified by it ...

  4. Freebsd的ports命令

    安装 make clean 卸载 make deinstall 重装 make reinstall 清理 make clean 列出配置单 make config 恢复默认的配置单 make rmco ...

  5. mini2440裸机试炼之——Uart与pc端实现文件、字符传输

    1.  波特率(Baud rate)即调制速率,1波特即指每秒传输1个符号. 2.  非FIFO模式,即数据传输不利用FIFO缓存,一个字节一个字节地传输. 3.  位能够用来推断发送缓存器中是否为空 ...

  6. centOS 7中上网以及网卡的一些设置

    在VMWare中安装LinuxOS是个非经常见的事情. 可是,关于虚拟机的上网问题.想在这里总结一下,里面还有不懂的问题.希望能够得到前辈的解惑. 一.VMWare网卡的设置的三种选项: Bridge ...

  7. Chrome自带恐龙小游戏的源码研究(完)

    在上一篇<Chrome自带恐龙小游戏的源码研究(七)>中研究了恐龙与障碍物的碰撞检测,这一篇主要研究组成游戏的其它要素. 游戏分数记录 如图所示,分数及最高分记录显示在游戏界面的右上角,每 ...

  8. C#的类型列表

    以下是 C# 内建类型的列表: 类型 字节 描述 unsigned byte signed byte signed short unsigned short signed integer unsign ...

  9. 字符数组和strcpy

    已知strcpy函数的原型是char *strcpy(char *strDest, const char *strSrc);,其中strDest是目的字符串,strSrc是源字符串. (1)Write ...

  10. 【BZOJ3630】[JLOI2014]镜面通道 几何+最小割

    [BZOJ3630][JLOI2014]镜面通道 Description 在一个二维平面上,有一个镜面通道,由镜面AC,BD组成,AC,BD长度相等,且都平行于x轴,B位于(0,0).通道中有n个外表 ...