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. gulp基本介绍
			
    一.gulp是什么 gulp就是用来机械化的完成重复性质(如less->css:js.css压缩:js混淆)的工作:gulp的机制就是将重复工作抽象成一个个的任务. 二.gulp使用 a.首先确 ...
    
			
    2. 
						
  2. 收藏的几个经典Flash
			
    本人收藏了几个有意思的Flash,在此与大家分享下 1.黄金矿工中文版.swf 2.中国象棋.swf 3.运动的老鼠.swf 4.时钟.swf 5. 2048.swf 6.小猫逃跑.swf
    
			
    3. 
						
  3. IBatis.Net使用总结（一）-- IBatis解决SQL注入（#与$的区别）
			
    IBatis解决SQL注入(#与$的区别) 在IBatis中,我们使用SqlMap进行Sql查询时,需要引用参数,在参数引用中可以使用两种占位符#和$.这两种占位符有什么区别呢? (1):#***#, ...
    
			
    4. 
						
  4. 各种解析漏洞获取Webshell
			
    各种解析漏洞拿shell  一.IIS 6.0解析漏洞 IIS 6.0解析利用方法有两种1.目录解析/xx.asp/xx.jpg2.文件解析wooyun.asp;.jpg第一种,在网站下建立文件夹的名 ...
    
			
    5. 
						
  5. ASP.NET 你必须知道的EF知识和经验
			
    原文:http://www.cnblogs.com/zhaopei/p/5721789.html
    
			
    6. 
						
  6. Node.js学习之简介
			
    1.简单的说Node.js就是运行在服务端的javaScript: 2.Node.js是一个基于Chrome javaScript运行时建立的一个平台: 3.Node.js是一个事件驱动I/O服务端J ...
    
			
    7. 
						
  7. js实现去重字符串
			
    实现去重字符串主要是把重复的字符与原来的字符(先push()进入一个数组存起来)相匹配,如果match返回的不是null则说明重复,就删除掉: <script> var str = pro ...
    
			
    8. 
						
  8. 北京电子科技学院（BESTI）实验报告1
			
    北京电子科技学院(BESTI)实验报告1 课程: 信息安全系统设计基础 班级:1452.1453 姓名:(按贡献大小排名)郑凯杰 .周恩德 学号:(按贡献大小排名)20145314 .20145217 ...
    
			
    9. 
						
  9. 【Oracle】去除表中重复的数据
			
    删除表重复数据 (t1表中有重复数据)1.使用distinct create table t2 as select * from t1;create table tmp_t2 as select di ...
    
			
    10. 
						
  10. 今天必须完成ireport+jasperreport转成pdf
			
    中午之前解决字体问题 2.问题总结 (1)Caused by: java.lang.NoSuchMethodException: Unknown property 'objectModelBean98 ...
    
			
    11.