响应式布局 Bootstrap
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的更多相关文章
- 响应式布局 Bootstrap(01)
1.是什么?Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷 Boot ...
- 10套免费的响应式布局 Bootstrap 模版
1. Cardio Cardio是我最喜欢的一个轻量级模板.它几乎可以很少的修改的用于任何类型的业务. 2. Evento Evento 是一个事件引导广告模板的形状.它是设计精美和注意细节. 3. ...
- 关于bootstrap和响应式布局
bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...
- 响应式布局之BootStrap
本文在于巩固基础 学习bootStrap官网http://getbootstrap.com/ 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多 ...
- Bootstrap禁用响应式布局
在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootst ...
- 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!
摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...
- 2017年最新基于Bootstrap 4 的专业、多用途响应式布局的系统模板
本文分享一款2017年最新的2017年最新基于Bootstrap 4 的专业.多用途响应式布局的系统模板,该模板是一款强大并且非常灵活的后台管理系统模板:能适应绝大多数的web应用程序开发,比如:AP ...
- bootstrap 自适应和响应式布局的区别
自适应: 不管屏幕多大,都尽量不换行,而只是横向缩放. 响应式: 屏幕变小了之后,属于同一行的元素受到挤压后,行的右边元素自动换行显式: 屏幕大了后,本属于同一行的元素尽可能的排在同一行内: boo ...
- 前端框架bootstrap(响应式布局)入门
Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...
随机推荐
- C#调用webservice简单实例
如何利用IIS创建webservice不多做阐述,直接讲C#代码中如何调用已创建好的webservice. 首先在VS2010中新建一个工程项目,然后右键点击工程名选择添加服务引用. 在URL一栏中输 ...
- union和union all 合并查询
union联合查询 SELECT TOP ID,oTitle Title,oInfo Description,Pic Images AND UpTime > dateadd(day,-,UpTi ...
- Windows无法安装到GPT分区的磁盘的解决方法
thinkpad 预装win8的机子,硬盘采用gpt分区,在重新安装其它系统的时候是无法安装的,会提示“windows无法安装到这个磁盘,选中的磁盘采用GPT分区 形式".所以先采用下面的方 ...
- JAVA基础中的注意点
1.标识符 标识符:标识某些事物用于区分的符号. (即区分某些事物的符号) 四条硬性规定: a.不能是 关键字.true.false.null. b.可以包含 字母.数字.0-9.下划线(_)或美元 ...
- 汽车遥控钥匙HCS101/HCS200/HCS201/HCS300芯片解密
汽车遥控钥匙芯片解密ic解密型号: HCS101 | HCS200 | HCS201 | HCS201T | HCS300 | HCS300T HCS301 | HCS301T | HCS360 | ...
- iOS 应用内的系统复制粘贴菜单显示的语言非中文
在应用的 Info.plist 文件中添加以下代码: <key>CFBundleLocalizations</key> <array> <string> ...
- 求两条线段交点zz
"求线段交点"是一种非常基础的几何计算, 在很多游戏中都会被使用到. 下面我就现学现卖的把最近才学会的一些"求线段交点"的算法说一说, 希望对大家有所帮助. 本 ...
- zorka源码解读之通过beanshell进行插桩的流程
zorka中插桩流程概述 1.在SpyDefinition中配置插桩属性,将SpyDefinition实例提交给插桩引擎.2.SpyDefinition实例中包含了插桩探针probes,probe插入 ...
- HTML: vertical algin Big/small div in same row (bootstrap)
Reference: http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3?answertab=vot ...
- Using MySQL Connector .NET 6.6.4 with Entity Framework 5
I had been waiting for the latest MySQL connector for .NET to come out so I can move on to the new a ...