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. vscode 编译调试c/c++的环境配置

    首先看了一下别人写的文章 http://blog.csdn.net/c_duoduo/article/details/51615381 在按照上文链接博主的安装步骤进行到MINGW的安装时出现一个问题 ...

  2. Hibernate学习三----------session详解

    © 版权声明:本文为博主原创文章,转载请注明出处 如何获取session对象 1. openSession 2. getCurrentSession - 如果使用getCurrentSession需要 ...

  3. 《textanalytics》课程简单总结（2）：topic mining

    coursera上的公开课<https://www.coursera.org/course/textanalytics>系列,讲的很不错哦. 1."term as topic&q ...

  4. 软件工程第2次作业——Visual Studio 2017下基于C/C++的VSTS单元测试实践

    Write one minute, test all day long. 环境确定 IDE:Microsoft Visual Studio 2017 Community 语言:C++ 单元测试工具:V ...

  5. ServletContext读取配置文件

    package servlet; import java.io.FileInputStream;import java.io.IOException;import java.io.InputStrea ...

  6. C++第4次实验（提高班）—继承和派生1

    从项目2和项目3中选1题作为实验.剩下2题写成作业. [项目1 - 龙三] 请在以下程序的横线处填上适当内容,以使程序完整,并使程序的输出为: Name: 龙三 Grade: 19 #include ...

  7. MySQL 原理性

    1.MySQL的复制原理以及流程 (1).复制基本原理流程 1. 主:binlog线程——记录下所有改变了数据库数据的语句,放进master上的binlog中: 2. 从:io线程——在使用start ...

  8. kaptcha的和springboot一起使用的简单例子

    https://blog.csdn.net/xiaoyu19910321/article/details/79296030

  9. API -- 图书

    豆瓣IAPI:https://developers.douban.com/wiki/?title=book_v2#get_isbn_book 其他:http://www.cnblogs.com/sop ...

  10. KVC基本使用

    首先,创建两个类.person类和book类.如图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/ ...