响应式布局 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 ...
随机推荐
- Windows下安装Redis
1.首先,Redis官方是支持Linux系统的,我这里不多说,需要的可以参考:http://www.oschina.net/question/12_18065/ 2.Windows 64位下载地址:h ...
- struts2学习记录
1.对于使用Struts2框架的应用而言,尽量不要让超级链接直接接到某个视图资源,因为这种方式增加了额外的风险.推荐将所有请求都发送给Struts框架,让该框架来处理用户请求,即使只是简单的超级链接. ...
- Delphi:与VCL同步(Synchronize()、用消息来同步)
看本文时,可以同时参考:Delphi中线程类 TThread实现多线程编程(事件.临界区.Synchronize.WaitFor……) 先说一下RTL和VCL RTL(Run-Time library ...
- Android之EACCES (Permission denied)与Permission denied异常探密
话说,Accipiter君,最近又开始怒学Android了,记得刚开始还是09年学的,现在的手机还是华为出的最早的一款Android手机C8500,那时候就想好好学习Android,赚点小钱,可是~~ ...
- MIS系统开发利器,实施、维护人员自定义报表的福音,AgileEAS.NET SOA平台动态报表指南
一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...
- npm-bluebird使用
API 注意 时刻注意return; 使用Promise.promisify简化对test(val, function(err, result){})的处理; 尽量避免使用deferred objec ...
- jQuery插件(选项卡)
使用选项卡插件可以将<ul>中的<li>选项定义为选项标题,在标题中,再使用<a>元素的“href”属性设置选项标题对应的内容,它的调用格式如下: $(select ...
- Android自动化测试-自动获取cpu和内存信息
CpuInfo.java package com.dtest; import java.io.BufferedReader; import java.io.FileWriter; import jav ...
- Only Link: Inheritance — private and protected inheritance in c++
reading note link: https://isocpp.org/wiki/faq/private-inheritance
- Spring任务调度之Quartz
一.Quartz作业类的继承方式来讲,可以分为两类: 作业类需要继承自特定的作业类基类,如Quartz中需要继承自org.springframework.scheduling.quartz.Quart ...