Bootstrap在线手册 http://v3.bootcss.com，这里有详细的说明、参考、示例。

Bootstrap为许多前端常用的功能都做了封装、预定义，可以直接使用。

Bootstrap支持一些定制，可以根据需要做一些参数调整、功能选择，然后下载使用。这种方式方便以后升级到新版本（如果直接修改代码，就不方便升级了）。

1、HTML5文档类型

Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

<!DOCTYPE html>

<html lang="zh-cn">

  ...

</html>

2、也就是说，Bootstrap是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是一个单一的文件。

为了确保适当的绘制和触屏缩放，需要在<head>之中添加viewport元数据标签。

<metaname="viewport"content="width=device-width, initial-scale=1.0">

在移动设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

3、响应式图片

通过添加.img-responsive class可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是为图片赋予了max-width: 100%; 和height: auto;属性，可以让图片按比例缩放，不超过其父元素的尺寸。

<img src="..." class="img-responsive" alt="Responsive image">

4、排版和链接

Bootstrap设置了全局样式，包括显示、排版和链接。尤其是，我们还：

  • 为body标签设置了background-color: #fff;样式
  • 设置了排版的基本属性@font-family-base、@font-size-base和@line-height-base
  • Set the global link color via @link-color and apply link underlines only on :hover

这些样式可以在scaffolding.less文件中找到。

5、栅格系统

栅格系统用于通过一系列的行（row）与列（column）的组合创建页面布局，你的内容就可以放入创建好的布局中。下面就介绍以下Bootstrap栅格系统的工作原理：

  • “行（row）”必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。
  • 使用“行（row）”在水平方向创建一组“列（column）”。
  • 你的内容应当放置于“列（column）”内，而且，只有“列（column）”可以作为行（row）”的直接子元素。
  • 类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
  • 通过设置padding从而创建“列（column）”之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。

6、排版

对于页面上的标题、强调、缩略语、地址、引用、列表等都定义了样式

表格

为任意<table>标签添加.table可以为其赋予基本的样式—少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将其样式独立出来。

Bootstrap学习笔记1的更多相关文章

  1. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  2. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  3. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  4. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  5. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  6. Bootstrap学习笔记博客

    本片博客用于记录之后要用到Bootstrap的学习笔记   概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...

  7. bootstrap学习笔记--bootstrap安装环境

    Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...

  8. Bootstrap学习笔记系列1-------Bootstrap网格系统

    Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...

  9. bootstrap 学习笔记（1）---介绍bootstrap和栅格系统

    学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...

  10. bootstrap 学习笔记

    bootstrap作为当下的流行框架不知道它怎么能行呢? 之前也看过好多bootstrap的网上教程,可是发现光看真的记不住,说起来也真是忧桑~重点还是要自己做才是真正的印象深刻.后来我发现解析模板是 ...

随机推荐

  1. wifi开发总结

    转自:http://blog.csdn.net/kakaxi1o1/article/details/35625019 Unable to open connection to supplicant o ...

  2. Angular中的Error: [$resource:badcfg]错误如何解决之一种

    相信这种情况很多的吧,我遇到的情况是因为在作reSource的service时,query出来的协议不对. 错误时候的代码: Version.factory("versionSrv" ...

  3. Fiddler Web Debugger Tool

    The Fiddler tool helps you debug web applications by capturing network traffic between the Internet ...

  4. Office Word 2013发布带数学公式的博客

    今日在自学冈萨雷斯的<数字图像处理>一书,想做笔记来记录,并分享一些MATLAB代码,又加上刚刚注册博客园的账户,便想着如何能够较为方便的来书写博客.本文主要涉及到的问题有: 如何用wor ...

  5. android操作XML的几种方式（转）

    XML作为一种业界公认的数据交换格式,在各个平台与语言之上,都有广泛使用和实现.其标准型,可靠性,安全性......毋庸置疑.在android平台上,我们要想实现数据存储和数据交换,经常会使用到xml ...

  6. 百度之星复赛 1004 / hdu5715 二分dp+trie

    XOR 游戏 Problem Description   众所周知,度度熊喜欢XOR运算[(XOR百科)](http://baike.baidu.com/view/674171.htm). 今天,它发 ...

  7. hdu 4586 Play the Dice 概率推导题

    A - Play the DiceTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/ ...

  8. codeforces 385 c

    Description Recently, the bear started studying data structures and faced the following problem. You ...

  9. libyuv 编译for ios

    这里有编译好的库 https://bintray.com/yarr/ios/libyuv-ios# lipo -info libyuv.a  Architectures in the fat file ...

  10. 标准事件模型和IE事件模型有哪些区别？请具体解释他们的差异。

    通常,事件传送有三个阶段:事件捕获阶段,停留目标阶段,事件冒泡阶段. 1.阶段差异 DOM事件模型包含捕获阶段和冒泡阶段,DOM事件模型可使用e.stopPropagation()来阻止事件流:IE事 ...