就像刚开始的 优雅，直观，强大的前端框架，让web开发更快，更容易，bootstrap给我的感觉就是把常用的布局，组件（导航，列表，按钮，表格），还有规范化颜色等等，同时它的遍历不至于此，他还支持了自定义，利用less，全局定义这些变量，让你自定义区修改，同时还有更多的图标插件可以用。在布局方面，更好的迎合了目前市场上移动端的出现，有了流网格，我们就不用再去考虑去兼容不同屏幕的展示端。

 
一 、框架
bootsrap构建于12列响应式网格，布局和组件。同时基于html5和jquery
<!DOCTYPE html>
<html lang="en">
...
</html>
所以文件头必须是html5
  • 移除了body的margin
  • 设置body的背景颜色为 background-color: white;
  • 使用@baseFontFamily, @baseFontSize, 和 @baseLineHeight 属性作为我们排版的基础
  • 通过 @linkColor 设置全局链的接颜色, 并适用于:hover情况下的下划线
然后在scaffolding.less文件里设置了一些基础的全局展示效果、排版、链接样式
 
整体布局分为两类，和position属性是一样的，分为默认的网格系统和流式网格系统，主要区别是流式网格系统是按照百分比，每一行都是12个，这个下面会说：
1 网格系统
Bootstrap的网格(栅格)系统在默认情况下采用12 列, 可制作宽度为940px的容器, 同时没有响应式功能. 当加入响应式CSS文件, 网格会根据视口大小适应724px与1170px宽度. 当视口低于767px宽度, 列会成为流式, 并上下垂直放置.

对于一个简单的两列布局, 创建一个.row和添加带有(合适)数字的.span*作为列. 因为这是一个12列的网格, 所以每一个 .span* 都是这12个数字, 并且每行的列(span)的数字相加必须等于12 (或者等于该父级).



  1. <div class="row">
    2. 

  2. <div class="span4">...</div>
    3. 

  3. <div class="span8">...</div>
    4. 

  4. </div>


在这个例子, 我们用了 .span4 和 .span8, 一共是12列, 这就形成一个完整的行




偏移是.offset*属性，指定单位偏移量 


 


当需要嵌套时，在默认的网格系统里, 要实现嵌套可对已有的 .span* 内添加一个新的 .row 并加入 .span*. 嵌套在内的列数总和要等于父级列.，当然也可以不相同。


 


 


2 流式网格系统


流式网格的列宽使用百分比, 并不是具体像素值. 它对于固定的网格系统具有相同的应对能力, 关键是在不同屏幕分辨率和设备之间, 又可以以正确的比例显示


只需要把.row 改成.row-fluid ，列的属性不变，同样偏移也是相同的，但是嵌套就有点不同


嵌套在内的列数总和需要等于12. 这是因为流式网格是用百分比设置宽度, 并不是像素值.


 


3 固定布局 container


创建一个流式、两栏的布局, 只需要<div class="container-fluid">—这非常适合应用于程序和文档类的网站.（但是经过测试，如果分成两栏，但是内容还是会有重叠）




  1. <div class="container-fluid">
    2. 

  2. <div class="row-fluid">
    3. 

  3. <div class="span2">
    4. 

  4. <!--Sidebar content-->
    5. 

  5. </div>
    6. 

  6. <div class="span10">
    7. 

  7. <!--Body content-->
    8. 

  8. </div>
    9. 

  9. </div>
    10. 

  10. </div>




 


4 响应式设计


当然很多时候要检测用户使用的屏幕多大，这需要我们检测，使用响应式功能更为方便




在你项目文件中的<head>里, 添加一个如例子所示的meta标签和一个响应式样式表来开始使用响应式. 如果已经在自定义页面编译好一个Bootstrap, 那么只需添加一个meta标签.




  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    2. 

  2. <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">


注意! Bootstrap在默认情况下是没有使用响应式功能的, 因为不是任何情况都需要使用到. 我们并不是让开发者移除此功能, 而是最好在需要使用的时候才使用它.




二 基本css


基础的css包括排版，代码输入，表格，表单，按钮，图像，最后还免费提供很多Glyphicons图标。


 


1 排版


bootstrap对标题h1-h6都进行了修改，还有全局默认的font-size，line-hegiht 以及段内的行间距。


新定义了突出段落 .lead  <p class="lead">...</p>


强调<small> <strong> <em> 还有html5的<b> <i> 


对齐 .text-left .text-center .text-right


强调颜色 规范了五中颜色 text-warning text-error text-info text-sucess


缩写很厉害啦， <abbr>  利用title属性可以将缩写包围的字母显示全写，<abbr title="attribute">attr</abbr>，以前都要用link实现的


地址管理，<address>  让html更加语义化，毕竟html是超文本标记语言




  1. <address>
    2. 

  2. <strong>Twitter, Inc.</strong><br>
    3. 

  3. 795 Folsom Ave, Suite 600<br>
    4. 

  4. San Francisco, CA 94107<br>
    5. 

  5. <abbr title="Phone">P:</abbr> (123) 456-7890
    6. 

  6. </address>




*css 层叠样式表 cascading style sheets


引用 <blockquote>




  1. <blockquote>
    2. 

  2. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    3. 

  3. <small>Someone famous <cite title="Source Title">Source Title</cite></small>
    4. 

  4. </blockquote>




列表没变 有序ol  无序 ul，当然还有很多添加的css， .unstyled 无样式， .inline-block水平排列，


 


2 代码


因为需要一些特殊标记，如<>,所以添加了<code>


For example, <code>&lt;section&gt;</code> should be wrapped as inline


 


3 表格


添加属性


.table-striped在表格内部添加条样，间隔一个一个 .table-bordered（圆角） .table-hover在table内部使用停悬效果 .table-condensed 是得单元格padding减半，让表格更加紧凑


同样还是四个颜色 .success  .error .warning .info


 


4 表单


 Label nameExample block-level help text here.Check me out




  1. <form>
    2. 

  2. <fieldset>
    3. 

  3. <legend>Legend</legend>
    4. 

  4. <label>Label name</label>
    5. 

  5. <input type="text" placeholder="Type something…">
    6. 

  6. <span class="help-block">Example block-level help text here.</span>
    7. 

  7. <label class="checkbox">
    8. 

  8. <input type="checkbox"> Check me out
    9. 

  9. </label>
    10. 

  10. <button type="submit" class="btn">Submit</button>
    11. 

  11. </fieldset>
    12. 

  12. </form>




还有文本框、下拉菜单、按钮很多没说出来，自己看文档吧


 


5 按钮


btn btn-info btn-primary btn-success btn-warning btn-danger btn-inverse  btn-link 


 大小区别 btn-large btn-small btn-mini 


 


6 图像


改变展示样式




  1. <img src="..." class="img-rounded">
    2. 

  2. <img src="..." class="img-circle">
    3. 

  3. <img src="..." class="img-polaroid">




7 图标




所有图标都需要一个独特、前缀带 icon-属性的<i> 标签. 如需使用时, 可直接将以下代码使用在任何地方:




  1. <i class="icon-search"></i>


也可以使用风格相反(白色)的图标, 这里准备了一个额外的属性. 我们将具体展示这些属性在导航条和下拉菜单中悬停和活动时候的状态效果.




  1. <i class="icon-search icon-white"></i>


注意! 当在旁边使用文本, 按钮或导航链接, 为了有一个适当的间距, 请一定要在<i>后面留一个空格位置.




 


三 组件


组件有下拉菜单， 按钮组，按钮式下拉菜单，导航（这个使用很多），导航条，路径是导航，分页，标签和标记，排版，省略图，通知，进度条


 


四 插件


插件可以单独被添加(有些有可能需要依赖), 或一次性全部导入. bootstrap.js 或 bootstrap.min.js 文件中, 包含了所有插件.


很多js插件，我们可以用一下


												


											
bootstrap2文档的学习的更多相关文章
	

    
								
  1. webpack搭建vue项目开发环境【文档向学习】
		
    为何有这篇文章 各个社区已经有无数篇帖子介绍如何使用webpack搭建前端项目,但无论是出于学习webpack的目的还是为了解决工作实际需要都面临着一个现实问题,那就是版本更新.别人的帖子可能刚写好版 ...
    
		
    2. 
						
  2. Unity shader 官网文档全方位学习（一）
		
    转载:https://my.oschina.net/u/138823/blog/181131 摘要: 这篇文章主要介绍Surface Shaders基础及Examples详尽解析 What?? Sha ...
    
		
    3. 
						
  3. C# 动态生成word文档  [C#学习笔记3]关于Main(string[ ] args)中args命令行参数  实现DataTables搜索框查询结果高亮显示  二维码神器QRCoder  Asp.net MVC 中 CodeFirst 开发模式实例
		
    C# 动态生成word文档 本文以一个简单的小例子,简述利用C#语言开发word表格相关的知识,仅供学习分享使用,如有不足之处,还请指正. 在工程中引用word的动态库 在项目中,点击项目名称右键-- ...
    
		
    4. 
						
  4. bash帮助文档简单学习；bash手册翻译
		
    关于bash的四种工作方式的不同,可以参考:http://feihu.me/blog/2014/env-problem-when-ssh-executing-command-on-remote/,但是 ...
    
		
    5. 
						
  5. Unity shader 官网文档全方位学习（二）
		
    摘要: 这篇文章主要介绍Lighting model及自定义Lighting model 上文咱们学了surface shader.这玩意在开始的时候啊,在定义哪个函数处理surface时用一定要指定 ...
    
		
    6. 
						
  6. 学习Java爬虫文档的学习顺序整理
		
    1.认识正则表达式(Java语言基础) https://www.toutiao.com/i6796233686455943693/ 2.正则表达式学习之简单手机号和邮箱练习 https://www.t ...
    
		
    7. 
						
  7. MapReduce和Hive学习文档链接学习顺序
		
    1.<CentOS6.5下安装Hadoop-2.7.3(图解教程)> https://www.toutiao.com/i6627365258090512909/ 2.<CentOS6 ...
    
		
    8. 
						
  8. 两年前实习时的文档——Platform学习总结
		
    1  概述 驱动程序实际上是硬件与应用程序之间的中间层.在Linux操作系统中,设备驱动程序对各种不同的设备提供了一致的訪问接口,把设备映射成一个特殊的设备文件,用户程序能够像其它文件一样对设备文件进 ...
    
		
    9. 
						
  9. 两年前实习时的文档——MMC学习总结
		
    1概述 驱动程序实际上是硬件与应用程序之间的中间层.在Linux操作系统中,设备驱动程序对各种不同的设备提供了一致的訪问接口,把设备映射成一个特殊的设备文件,用户程序能够像其它文件一样对设备文件进行操 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 洛谷P5159 WD与矩阵
			
    题目背景 WD整日沉浸在矩阵中,无法自拔-- 题目描述 WD特别喜欢矩阵,尤其是\(01\)矩阵. 一天,CX给了WD一个巨大的\(n\)行\(m\)列的\(01\)矩阵,WD发现这个矩阵每行.每列的 ...
    
			
    2. 
						
  2. ubuntu 的 python从2.* 升级到3.*
			
    1.在ubuntu 的终端中用代码下载最新的Python sudo apt-get install python3 2.用命令删除usr/bin/目录下的默认python link文件root@sal ...
    
			
    3. 
						
  3. Django 02 url路由配置及渲染方式
			
    Django 02 url路由配置及渲染方式 一.URL #URL #(Uniform Resoure Locator) 统一资源定位符:对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是 ...
    
			
    4. 
						
  4. 013 Roman to Integer 罗马数字转整数
			
    给定一个罗马数字,将其转换成整数. 返回的结果要求在 1 到 3999 的范围内. 详见:https://leetcode.com/problems/roman-to-integer/descript ...
    
			
    5. 
						
  5. ACdream 1236 Burning Bridges 割边 + 去重边
			
    题目就是求一副图的割边,然后对于那些有重复的边的,不能算做割边. 思路就是每次加入一条边的时候,判断这条边是否存在过,存在过的话,就把那条边设为inf,表示不能作为割边.于是有了这样的代码 #incl ...
    
			
    6. 
						
  6. 在Pycharm中写python代码时光标变粗
			
    在练习写python代码时,不小心摁了Insert键,结果光标变粗. 如下图所示: 原因: 和word一样,在编辑文本或代码时,有两种模式:改写和插入模式. 当我们在编辑文章或者是代码时,应该将模式设 ...
    
			
    7. 
						
  7. 精心整理的SQL语句学习大全
			
    -语 句 功 能  --数据操作SELECT --从数据库表中检索数据行和列INSERT --向数据库表添加新数据行DELETE --从数据库表中删除数据行UPDATE --更新数据库表中的数据-数据 ...
    
			
    8. 
						
  8. windows 安装python
			
    前言: Windows 中直接使用Python真的是心累 安装vs 2017(最好是最新版的, 因为python依赖于一些vs提供的包) 下载最新的python的安装程序 安装完毕之后, 不像Linu ...
    
			
    9. 
						
  9. C#语言使用习惯
			
    1.使用属性而不是可访问的数据成员 2.用运行时常量(readonly)而不是编译期常量(const) 编译期常量与运行时常量行为的不同之处在于对他们的访问方式不同,编译期常量的值是在目标代码中进行替 ...
    
			
    10. 
						
  10. JQuery使用正则表达式验证手机号，邮箱，身份证（含有港澳台），网址
			
    自己对正则验证也没系统用过,这次自己做个demo,一下子把这些全都用上了,下次有需要直接来拿了. 以下代码是在页面使用JQuery进行验证的,也有在后台进行验证的,可以试试,都一样的原理. 直接上代码 ...
    
			
    11.