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. 安装配置 Kafka Manager 分布式管理工具

    Kafka Manager 特性,它支持以下内容(官方译解): 管理多个群集容易检查集群状态(主题,消费者,偏移量,经纪人,副本分发,分区分配)运行首选副本选举使用选项生成分区分配,以选择要使用的代理 ...

  2. jenkins 构建一个前端web项目

    Jenkins发布web前端代码 “系统管理”“管理插件”“已安装” 检查是否有“Git plugin”和“Publish Over SSH”两个插件,如果没有,则需点击“可选插件”,找到它并安装 ...

  3. log4j email EmailDailyRollingFileAppender

    log4j发送日志邮件, 纠正非网上流传的"达到 BufferSize KB就会发送邮件", 另外重写了一个发送邮件的类DailyRollingFileAppender. 用于定期 ...

  4. 转：几款主流pcb软件比较

      原理图设计软件:会ORCAD就可以了,支持的Netlist超多,基本是业界标准. PCB Layout 软件 1.Protel,现在推AltiumDesigner.国内低端设计的主流,国外基本没人 ...

  5. jQuery源代码 框架分析

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

  6. js 显示当前系统时间

    <div id="test"></div>                <script >                    setInt ...

  7. redis写磁盘报错Cannot allocate memory

    查看 Redis 日志发现系统在频繁报错: [1821] 10 Nov 09:59:04.086 # Can't save in background: fork: Cannot allocate m ...

  8. 字符串查找strpos（）函数用法

    #如果id=3 在字符串中查找出3是否存在.$str="2,12,33,22,55"; if(strpos(','.$id.',',','.$str.',')!==FALSE){ ...

  9. ios math.h 常用数学函数

    1. 三角函数  double sin (double);正弦  double cos (double);余弦  double tan (double);正切  2 .反三角函数  double as ...

  10. 开源监控系统Prometheus介绍

    前言 Prometheus是CNCF的一个开源项目,Google BorgMon监控系统的开源版本,是一个系统和服务的监控系统.周期性采集metrics指标,匹配规则和展示结果,以及触发某些条件的告警 ...