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. SQL CASE WHEN ... THEN ... ELSE.. END 实例

    用一个SQL语句完成不同条件的分组(SELECT部分): select QuoteOrderId,SUM(case when(ApprovalStatus=1)then Amount else 0 e ...

  2. Android中使用HttpURLConnection实现GET POST JSON数据与下载图片

    Android中使用HttpURLConnection实现GET POST JSON数据与下载图片 Android6.0中把Apache HTTP Client全部的包与类都标记为deprecated ...

  3. jquery列表自动加载更多

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. oracle中字符串类似度函数实測

    转载请注明出处:http://blog.csdn.net/songhfu/article/details/40074795 主要利用:oracle函数-SYS.UTL_MATCH.edit_dista ...

  5. 创业神人&当时钢铁侠：Elon Musk

    Steve Jobs的光环已经随着他的离去而淡褪,短期内,世上恐怕再难有人像他这样惊世骇俗般的改变了世界.但是如果你了解到一个人,一个来自南非年仅40岁的企业家,在短短的20年里,在全世界最酷的三个领 ...

  6. git分支处理

    查看分支:git branch 创建分支:git branch <name> 切换分支:git checkout <name> 创建+切换分支:git checkout -b ...

  7. python 基础 5.3 类的重写

    一. 类的重写 只需要重新定义类的属性(变量),就是累的重写了 示例:重新定义类grandson的 name属性   #/usr/bin/python #coding=utf-8 #@Time :20 ...

  8. android菜鸟学习笔记3----关于AndroidMainfest.xml

    每个android项目都包含一个AndroidMainfest.xml文件,它包含了组成应用程序的每一个Acitivity.Service.Content Provider和Broadcast Rec ...

  9. MongoDB在win7上的安装（精简版）

    1.下载mongdb的zip文件,解压后会发现有bin文件夹,在同层目录下建一个data目录, 2.在data目录下建一个log和db文件夹, 3.在log文件下建一个MongoDB.log 文件 4 ...

  10. 【题解】[CF718C Sasha and Array]

    [题解]CF718C Sasha and Array 对于我这种喜欢写结构体封装起来的选手这道题真是太对胃了\(hhh\) 一句话题解:直接开一颗线段树的矩阵然后暴力维护还要卡卡常数 我们来把\(2 ...