这是一段典型的html typical HTML file:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Bootstrap 101 Template</title>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   </head>
  7.   <body>
  8.     <h1>Hello, world!</h1>
  9.     <script src="http://code.jquery.com/jquery.js"></script>
  10.   </body>
  11. </html>

To make this a Bootstrapped template, just include the appropriate CSS and JS files:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Bootstrap 101 Template</title>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <!-- Bootstrap -->
  7.     <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  8.   </head>
  9.   <body>
  10.     <h1>Hello, world!</h1>
  11.     <script src="http://code.jquery.com/jquery.js"></script>
  12.     <script src="js/bootstrap.min.js"></script>
  13.   </body>
  14. </html>

And you're set! With those two files added, you can begin to develop any site or application with Bootstrap.

全局设定global setting：

Requires HTML5 doctype

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

Bootstrap用到的HTML元素和CSS属性需要HTML5 doctype。因此每个使用Bootstrap的页面都应该包启HTML5声明。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   ...
  4. </html>

Typography and links

Bootstrap sets basic global display, typography, and link styles. Specifically, we:

  • Remove margin on the body
  • Set background-color: white; on the body
  • Use the @baseFontFamily, @baseFontSize, and @baseLineHeight attributes as our typographic base
  • Set the global link color via @linkColor and apply link underlines only on :hover

These styles can be found within scaffolding.less.

Reset via Normalize

With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css, a project by Nicolas Gallagher and Jonathan Neal that also powers the HTML5 Boilerplate. While we use much of Normalize within our reset.less, we have removed some elements specifically for Bootstrap.

Default grid system

Live grid example

The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

做为框架默认的一部分，Bootstrap提供了940px宽, 12列的栅格系统（没有交互式开启）。如果引入了responsive css文件，那么就会依据你的设备viewport来更改宽度。如果设备在767以下，列就会变成流动

Basic grid HTML

For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each.span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

因为他是一个12 column的网格，span数加起来总是要等于12或等于他的parent的宽度。

  1. <div class="row">
  2.   <div class="span4">...</div>
  3.   <div class="span8">...</div>
  4. </div>

Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.

（row内的所有span都位于同一行内

Offsetting columns

Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example,.offset4 moves .span4 over four columns.

移动列到右边使用offset类，美国类增加左边距。例如：offset4移动span4 4个列。

  1. <div class="row">
  2.   <div class="span4">...</div>
  3.   <div class="span3 offset2">...</div>
  4. </div>

Nesting columns

To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.

列的内嵌

在Bootstrap中使用静态(non-fluid)栅格很容易实现内嵌， 只要在一个已存在的 .span* 列中，嵌套一个新的 .row 列，然后在 .row 列中再添加一组 .span* 列即可。

  1. <div class="row">
  2.   <div class="span9">
  3.     Level 1 column
  4.     <div class="row">
  5.       <div class="span6">Level 2</div>
  6.       <div class="span3">Level 2</div>
  7.     </div>
  8.   </div>
  9. </div>

猜一下怎么显示：

Live fluid grid example 流动网格系统

The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.

基于百分比，而非像素

流式栅格系统中的列宽使用百分比计算宽度而非像素。与像素栅格布局一样，Bootstrap根据设备和分辨率不同提供了不同的响应性方案。

Basic fluid grid HTML

Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.

把固定布局变成流式布局很简单，把 .row 变成 .row-fluid即可，列内容不变，因此在流式布局和固定布局之间转换非常简单。

  1. <div class="row-fluid">
  2.   <div class="span4">...</div>
  3.   <div class="span8">...</div>
  4. </div>

Fluid offsetting

Operates the same way as the fixed grid system offsetting: add .offset* to any column to offset by that many columns.

  1. <div class="row-fluid">
  2.   <div class="span4">...</div>
  3.   <div class="span4 offset2">...</div>
  4. </div>

Fluid nesting

Fluid grids utilize nesting differently: each nested level of columns should add up to 12 columns. This is because the fluid grid uses percentages, not pixels, for setting widths.

流式列的内嵌

流式列的内嵌稍稍有点不同：嵌套column level应该加起来为12，因为所有的内嵌列都是按比例分配父列的100%宽度。

  1. <div class="row-fluid">
  2.   <div class="span12">
  3.     Fluid 12
  4.     <div class="row-fluid">
  5.       <div class="span6">
  6.         Fluid 6
  7.         <div class="row-fluid">
  8.           <div class="span6">Fluid 6</div>
  9.           <div class="span6">Fluid 6</div>
  10.         </div>
  11.       </div>
  12.       <div class="span6">Fluid 6</div>
  13.     </div>
  14.   </div>
  15. </div>

怎么显示？

Fixed layout固定布局

Provides a common fixed-width (and optionally responsive) layout with only <div class="container"> required.

用 <div class="container"> 实现的简单的中央布局的页面，默认为940px宽。

  1. <body>
  2.   <div class="container">
  3.     ...
  4.   </div>
  5. </body>

Fluid layout

Create a fluid, two-column page with <div class="container-fluid">—great for applications and docs.

 <div class="container-fluid"> 提供灵活的页面结构，定义了最小和最大宽度，拥有一个左边栏。很适合做应用和文档。
  1. <div class="container-fluid">
  2.   <div class="row-fluid">
  3.     <div class="span2">
  4.       <!--Sidebar content-->
  5.     </div>
  6.     <div class="span10">
  7.       <!--Body content-->
  8.     </div>
  9.   </div>
  10. </div>

Responsive design

Enabling responsive features

Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. If you've compiled Bootstrap from the Customize page, you need only include the meta tag.

  1. <metaname="viewport"content="width=device-width, initial-scale=1.0">
  2. <linkhref="assets/css/bootstrap-responsive.css"rel="stylesheet">

Heads up! Bootstrap doesn't include responsive features by default at this time as not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed.

 
 

bootstrap scaffold框架的更多相关文章

  1. CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架：

    19:29 2016/3/10CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:项目主路径:F:\wamp\www\graduationPr ...

  2. Bootflat – 基于 Bootstrap CSS 框架的扁平化界面

    Bootflat 是一个开源的扁平化的 UI 工具包,基于 Bootstrap 3.1.0 CSS 框架.它为 Web 开发人员提供了一个创建优雅的 Web 应用程序的更快,更容易和更少的重复任务的途 ...

  3. 基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【六】【引入bootstrap前端框架】

    https://blog.csdn.net/linzhefeng89/article/details/78752658 基于springboot+bootstrap+mysql+redis搭建一套完整 ...

  4. [转]50个极好的bootstrap 后台框架主题下载

    50个极好的bootstrap 后台框架主题下载 http://sudasuta.com/bootstrap-admin-templates.html 越来越多的设计师和前端工程师开始用bootstr ...

  5. 50个极好的bootstrap 后台框架主题下载

    50个极好的bootstrap 后台框架主题下载 http://sudasuta.com/bootstrap-admin-templates.html 越来越多的设计师和前端工程师开始用bootstr ...

  6. bootCDN引用的bootstrap前端框架套件和示例

    这是bootCDN上引用的bootstrap前端框架套件,由多个框架组合而成,方便平时学习和测试使用.生产环境要仔细琢磨一下,不要用开发版,而要用生产版.bootCDN的地址是:https://www ...

  7. BootStrap前端框架

    BootStrap前端框架 Bootstrap 教程:http://www.runoob.com/bootstrap/bootstrap-tutorial.html BpptStrap操作手册:htt ...

  8. bootstrap前端框架使用总结分享

    1.bootstrap 排版 全局样式style.css: 1.移除body的margin声明 2.设置body的背景色为白色 3.为排版设置了基本的字体.字号和行高 4.设置全局链接颜色,且当链接处 ...

  9. Bootstrap前端框架快速入门专题

    1.Bootstrap简介 Bootstrap,出自自 Twitter,是目前最受欢迎的前端框架. Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的前端框架,它简洁灵活,使得 W ...

随机推荐

  1. 帝国cms数据表详细说明

    表 名 解释 phome_ecms_infoclass_news 新闻采集规则记录表 phome_ecms_infotmp_news 采集临时表 phome_ecms_news 新闻主数据记录表 ph ...

  2. Tomcat embed

    http://www.iflym.com/index.php/code/use-embeded-tomcat-to-javaee-start-tomcat.html http://java.dzone ...

  3. 关于COOKIE使用过程为NULL

    关于COOKIE使用过程中的一个小问题在程序中要用到COOKIE,网站website/login/login.aspx传值userID到 website/web/tab/web.aspx中的FRAME ...

  4. UC/0S2之中断

    中断是计算机系统处理异步事件的重要机制.当异步事件发生时,事件通常是通过硬件向cpu发出中断请求的.在一般情况下,cpu响应这个请求后会立即运行中断服务程序来处理该事件: 为了处理任务延时.任务调度等 ...

  5. ORACLE分科目统计每科前三名的学生的语句

    有个成绩表 score(student_no,Subject_no,Score)分别为学号,课程号,成绩.我想用语句查询出每科的前三名学生的学号,请各位高手教教小弟 1.创建测试语句:create t ...

  6. quartz搭建与应用

    1.添加依赖 依赖包括Quartz和logback <dependencies> <dependency> <groupId>org.quartz-schedule ...

  7. FreeCodeCamp：Title Case a Sentence

    要求: 确保字符串的每个单词首字母都大写,其余部分小写. 像'the'和'of'这样的连接符同理. 结果: titleCase("I'm a little tea pot") 应该 ...

  8. JavaSE学习总结第14天_API常用对象4

      14.01 如何校验一个QQ号码案例 import java.util.Scanner; /* * 校验qq号码. * 1:要求必须是5-15位数字 * 2:0不能开头 * * 分析: * A:键 ...

  9. Python读取Excel数据并根据列名取值

    一直想将自己接触到的东西梳理一遍,可就是迈不出第一步,希望从这篇总结开始不要再做行动的矮人了. 最近测试过程中需要用到python读取excel用例数据,于是去了解和学习了下xlrd库,这里只记录使用 ...

  10. DFS(White-Gray-Black)

    参考<数据结构与算法> 本书在复杂深度优先遍历图时,采用三种颜色标记图中节点 1 white 表示未访问 2 gray 表示已经正在访问,其相邻节点 3 black 表示该节点所有的相邻节 ...