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. Webloigic监控

    http://www.huilog.com/?p=688 http://www.beansoft.biz/weblogic/docs92/jmx/accessWLS.html http://docs. ...

  2. 设计模式学习之单例模式（Singleton,创建型模式）（4）

    假如程序中有一个Person类,我的需求就是需要在整个应用程序中只能new一个Person,而且这个Person实例在应用程序中进行共享,那么我们该如何实现呢? 第一步: 新建一个Person类,类中 ...

  3. javascript的队列，优先队列，循环队列

    按书上的来弄的.慢慢理解了. function Queue() { var items = []; this.enqueue = function(element){ items.push(eleme ...

  4. Tomcat中的webapps中的web应用的文件结构

    可仿造Tomcat中的webapps下的已有web应用的例子 具体文件结构如下:

  5. MySQL的优化技术总结

    MySQL的优化技术总结 如果Cache很大,把数据放入内存中的话,那么瓶颈可能是CPU瓶颈或者CPU和内存不匹配的瓶颈: seek定位的速度,read/write即读写速度: 硬件的提升是最有效的方 ...

  6. Selenium介绍

    基于selenium的自动化测试,华为已经做了两代了,目前是做到SmartGUI2.0,基于他们自己的AutoSpace平台.不过目前支持的貌似只有IE和火狐(火狐3.6).控件录制支持ID,Name ...

  7. LightOJ1122 Digit Count（DP）

    dp[i][j]表示长度i末尾为S[j]的方案数 dp[1][0...m-1]=1 dp[i][j]=∑dp[i-1][k] (|S[k]-S[j]|<=2) #include<cstdi ...

  8. 算法教程（1）zz

    Introduction Many TopCoders seem to be mortally afraid of geometry problems. I think it's safe to sa ...

  9. ANSYS:Negative pivot encountered

    做柔性体仿真,从ANSYS导入模态中性文件时有这个报错. Negative pivot encountered. This is  likely caused by insufficient disp ...

  10. android 进程什么时候被销毁

    http://wear.techbrood.com/guide/components/processes-and-threads.html 每一个 android 应用默认会起一个进程,除非你用 an ...