github介绍

              (1)简单灵活可用于架构流行的 用户界面和交互接口 的html、css、javascript工具集

              (2)基于html5、css3的bootstrap，具有大量的诱人特征：

                                    友好的学习曲线、卓越的兼容性、响应式设计、12列格网、样式向导文档

              (3)自定义jQuery插件，完整的类库，基于Less
下载
b2 支持更广泛的浏览器 但 有兼容性等历史包袱，代码不够简洁，
b3放弃了ie7 ff3.2，ie8虽然支持 但是对css3支持有限

Bootstrap中的JS插件依赖于jQuery,因此jQuery要在Bootstrap之前引用

1.基本模板（Basic template）
样式表 放在 head里 而 最先加载完毕，而js在body 的 最后面。
<!DOCTYPE html>

<html lang="zh-cn">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

  </body>

</html>
bootstrap不支持 ie 兼容模式，运用 以下 在ie 中运行 最新 渲染模式：
<meta http-equiv="X-UA-Compatible" content="IE=edge">


初始化 移动浏览显示，
"width=device-width"：宽度=设备 宽度；
"initial-scale"设置 初始缩放比例，值 1 表示 不缩放。
让视口的宽度等于物理设备上真实的分辨率，初始缩放比例为1表示不做任何缩放。（加上以下代码 可 适配 移动浏览器）：




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




为IE6、7、8(IE9以下版本) 添加 媒体查询(兼容css3样式)、HTML5标签 的支持  




<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->






全局 CSS 样式


排版与链接(全局样式)


Bootstrap 不再 一味 追求 归零， 更注重 重置可能产生问题 的样式（如，body,form的margin等），保留和坚持部分浏览器的基础样式，解决部分潜在的问题，如下：


    • 移除body的margin声明
      • 

    • 设置body的背景色为白色
      • 

    • 为排版设置了基本的字体、字号和行高
      • 

    • 设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式
												


											
响应式布局  Bootstrap的更多相关文章
	

    
								
  1. 响应式布局 Bootstrap（01）
		
    1.是什么?Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷 Boot ...
    
		
    2. 
						
  2. 10套免费的响应式布局 Bootstrap 模版
		
    1. Cardio Cardio是我最喜欢的一个轻量级模板.它几乎可以很少的修改的用于任何类型的业务. 2. Evento Evento 是一个事件引导广告模板的形状.它是设计精美和注意细节. 3.  ...
    
		
    3. 
						
  3. 关于bootstrap和响应式布局
		
    bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...
    
		
    4. 
						
  4. 响应式布局之BootStrap
		
    本文在于巩固基础 学习bootStrap官网http://getbootstrap.com/ 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多 ...
    
		
    5. 
						
  5. Bootstrap禁用响应式布局
		
    在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootst ...
    
		
    6. 
						
  6. 巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！
		
    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...
    
		
    7. 
						
  7. 2017年最新基于Bootstrap 4 的专业、多用途响应式布局的系统模板
		
    本文分享一款2017年最新的2017年最新基于Bootstrap 4 的专业.多用途响应式布局的系统模板,该模板是一款强大并且非常灵活的后台管理系统模板:能适应绝大多数的web应用程序开发,比如:AP ...
    
		
    8. 
						
  8. bootstrap 自适应和响应式布局的区别
		
    自适应:  不管屏幕多大,都尽量不换行,而只是横向缩放. 响应式: 屏幕变小了之后,属于同一行的元素受到挤压后,行的右边元素自动换行显式: 屏幕大了后,本属于同一行的元素尽可能的排在同一行内: boo ...
    
		
    9. 
						
  9. 前端框架bootstrap(响应式布局)入门
		
    Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Java中的Serializable接口transient关键字，及字节、字符、对象IO
			
    1.什么是序列化和反序列化Serialization是一种将对象转为为字节流的过程:deserialization是将字节流恢复为对象的过程. 2.什么情况下需要序列化a)当你想把的内存中的对象保存到 ...
    
			
    2. 
						
  2. plist文件的读写
			
    参考资料 http://blog.csdn.net/totogo2010/article/details/7634185
    
			
    3. 
						
  3. 怎么在myeclipse中导入已经写好的项目
			
    经常我们需要学习别人写好了的源码来提升自己的编码能力,本文将介绍如何从外部导入别人已经写好的项目到我们myeclipse里面.同时也将介绍怎么给导入的工程改名的问题.                  ...
    
			
    4. 
						
  4. C#回顾 –5.反射
			
      ]; //获取构造函数 var obj = ci.Invoke(null);//实例化构造函数 T1.InvokeMember(funName, BindingFlags.InvokeMethod ...
    
			
    5. 
						
  5. Python for Data Analysis
			
    Data Analysis with Python ch02 一些有趣的数据分析结果 Male描述的是美国新生儿男孩纸的名字的最后一个字母的分布 Female描述的是美国新生儿女孩纸的名字的最后一个字 ...
    
			
    6. 
						
  6. Java中分割字符串
			
    java.lang.String 的 split() 方法, JDK 1.4 or later public String[] split(String regex,int limit) 示例代码 p ...
    
			
    7. 
						
  7. windows下编译及使用libevent
			
    Libevent官网:http://libevent.org/ windows 7下编译: 编译环境: windows 7 + VS2010 (1)解压libevent到F:\libevent\lib ...
    
			
    8. 
						
  8. Linux下安装JDK多种方式
			
    一.环境说明: 操作系统:Linux xx- -.el6.x86_64 # SMP Thu Jul :: UTC x86_64 x86_64 x86_64 GNU/Linux jdk版本:java-- ...
    
			
    9. 
						
  9. SQL SERVER 中的提示
			
    提示是指定的强制选项或策略,由 SQL Server 查询处理器针对 SELECT.INSERT.UPDATE 或 DELETE 语句执行. 提示将覆盖查询优化器可能为查询选择的任何执行计划. 注意: ...
    
			
    10. 
						
  10. 关于APP接口设计（转）
			
    最近一段时间一直在做APP接口,总结一下APP接口开发过程中的注意事项: 1.效率:接口访问速度 APP有别于WEB服务,对服务器端要求是比较严格的,在移动端有限的带宽条件下,要求接口响应速度要快,所 ...
    
			
    11.