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. Odoo中最小库存规则和按订单生成规则的区别
			
    ---恢复内容开始--- 最小库存规则(Minimum stock rule)用来保证你的库存产品数量总是不会低于设定的最小库存数量.用来保证产品生产和回到客户的需求.当库存产品低于这个最小库存数量时 ...
    
			
    2. 
						
  2. node07-http
			
    目录:node01-创建服务器 node02-util node03-events node04-buffer node05-fs node06-path node07-http node08-exp ...
    
			
    3. 
						
  3. React学习笔记-3-非dom属性介绍
			
    非dom属性?dangerouslySetInnerHTML,ref,key非dom标准属性,也就是说dom标准里面没有规定的属性,react引入了三个非dom属性,如上.dangerouslySet ...
    
			
    4. 
						
  4. 在SQL SERVER中实现RSA加解密函数（第一版）
			
    /*************************************************** 作者:herowang(让你望见影子的墙) 日期:2010.1.1 注:   转载请保留此信息 ...
    
			
    5. 
						
  5. Javascript中的apply与call详解
			
    JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别. 一.方法定义 1.call 方法 语法:call([thisObj[,arg1[, arg2[, [,.arg ...
    
			
    6. 
						
  6. 11 JSP/EL表达式/EL函数
			
    JSP      * 概述: JSP(Java Server Pages)与Java Servlet一样,是在服务器端执行的不同的是先由服务器编译部署成Servlet执行      * JSP的运行原 ...
    
			
    7. 
						
  7. iOS 从git拷贝Xcode的snippets
			
    do following things in terminal 1. check out the project using: git clone gitAddress 2. cd the proje ...
    
			
    8. 
						
  8. Android入门(二):Android工程目录结构
			
    首先我们来看看Android工程的目录结构,如下图: 下面我们来看看每个文件夹都是用来做什么的? 1.src:这个不用多说,它就是保存Java源文件的目录: 2.gen:该文件夹用来保存自动生成的R. ...
    
			
    9. 
						
  9. 用于异步的BackgroundWorker
			
    XAML代码: <Window x:Class="backgroundtest.MainWindow" xmlns="http://schemas.microsof ...
    
			
    10. 
						
  10. StringTemplate初步使用
			
    例子1: private static void test_1(String[] args) throws Exception { ST hello = new ST("Hello, < ...
    
			
    11.