Bootstrap CSS概览代码文字标注篇
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap 练习</title>
<!--Bootstrap3的设计目标是移动设备优先，然后才是桌面设备。为了让Bootstrap开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的head之中添加viewport meta 标签-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--width属性控制设备的宽度。假设网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为device_width可以确保它能正确的呈现在不同设备上。initial-scale=1.0确保网页加载时，以1:1的比例呈现，不会有任何的缩放-->
<!--在移动浏览设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用其缩放(zooming)功能。通常情况下，maximum-scale=1.0与user-scalable=no 一起使用。这样 禁用其缩放(zooming)功能。注意，这种方式我们并不推荐所有网站使用。-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<!-- 引入 Bootstrap -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<style>
/*bootstrap3使用body{margin:0;}来移除body的边距。*/
body{font-family:"Helvetica Neua",Helvetica,Arial,sana-serif; font-size:14px; line-height:1.428571429; color:#333; background-color:#fff;}
/*css代码，img-responsive class为图像赋予了max-width和height属性，可以让图像按比例缩放，不超过其父元素尺寸。这表明相关的图像呈现为inline-block。当元素的display属性设置为inline-block，元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。设置height：auto，相关元素的高度取决于浏览器。设置max-width为100%会重写任何通过width属性指定的宽度。让图片对响应式布局更友好*/
.img-responsive{display:inline-block;height:auto; max-width:100%;}
/*当鼠标悬停在连接上，或者点击过的连接，颜色会被设置为#2a6496 同时，会呈现一条下划线，点击过的连接，会呈现一个颜色为#333的细的虚线框，框为5像素，且基于webkit浏览器有一个-webkit-focus-rings-color的浏览器扩展。轮廓偏移设置为-2像素*/
a:hover,
a:focus{color:#2a6496; text-decoration:underline;}
a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color; outline-offset:-2px;}
/*把container的左右外边距(margin-right、margin-left)交由浏览器决定，注意，由于内边距(padding)是固定宽度，默认情况下容器是不可镶嵌的*/
.container{padding-right:15px; padding-left:15px; margin-right:auto;margin-left:auto;}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<h2>响应式图像</h2>
<img class="img-responsive" src="QQ截图20160603133912.png" alt="响应式图像">
<!--通过添加img-responsive class可以让Bootstrap 3中的图像对响应式布局的支持更友好--><br>
<h2>排版</h2>
<p>使用@font-family-base、@font-size-base和@line-height-base属性作为排版样式</p><br>
<h2>连接样式</h2>
<p>通过属性@link-color设置全局链接的颜色。对于链接的默认样式，如上a css</p>
<h3>以上所有样式都可以在scaffolding.less中找到</h3>
<h2>避免跨浏览器的不一致性</h2><p>Normalize.css是很小的css文件，在HTML元素的默认样式中提供了更好的跨浏览器一致性</p>
<h2>容器(container)</h2>
<div>Bootstrap3的container class用于包裹页面上的内容。
<p><div>.container:before,.ontainer:after{display:table;content:"";}</div>
这会产生伪元素。设置display为table，会创建一个匿名的table-cell和一个新的块格式化上下文。:before伪元素防止上边距崩塌，：after伪元素清除浮动。如果conteneditable属性出现在HTML中，由于Opera bug，围绕上述元素创建一个空格这可以通过使用content:""来修复。
<div>.container:after{clear:both;}</div>
它创建了一个伪元素，并确保了所有的容器包含所有的浮动元素。Bootstrap 3 CSS有一个申请响应的媒体查询，在不同的媒体查询阈值范围内都为container设置了max-width，用以匹配网格系统。
<div>@media(min-width:768px){
.container{
width:750px;
}}</div>
</p>
</div><br>
<h2>Bootstrap浏览器、设备支持</h2>
<p>下表为Bootstrap支持最新版本的浏览器和平台：</p>
<table border="3px" width="100%" cellpadding="1" cellspacing="2" color="#3366CC">
<tr><td></td>
<td>Chrome</td>
<td>Firefox</td>
<td>IE</td>
<td>Opera</td>
<td>Safair</td>
</tr>
<tr>
<td>Android</td>
<td>YES</td>
<td>YES</td>
<td>不适用</td>
<td>NO</td>
<td>不适用</td>
</tr>
<tr>
<td>IOS</td>
<td>YES</td>
<td>不适用</td>
<td>不适用</td>
<td>NO</td>
<td>YES</td>
</tr>
<tr>
<td>Mac OS X</td>
<td>YES</td>
<td>YES</td>
<td>不适用</td>
<td>YES</td>
<td>YES</td>
</tr>
<tr>
<td>Windows</td>
<td>YES</td>
<td>YES</td>
<td>YES*</td>
<td>YES</td>
<td>NO</td>
</tr>
*Bootstrap支持Internet Explorer 8及更高版本的IE浏览器
</table><br>
<h2>Bootstrap网格系统</h2>
<p>Bootstrap提供了一套响应式、移动设备优先的网格流式网格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列</p><br>
<h3>什么是网格(Grid)</h3>
<p>在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用HTML和CSS的方法</p><br>
<h3>什么是bootstrap网格系统(Grid System)</h3>
<p>Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。</p>
<ul type="circle"><li>一、内容</li>
<li>决定什么是最重要的</li>
<li>二、布局</li>
<li>优先设计更小的宽度</li>
<li>基础的css是移动设备优先，媒体查询是针对于平板电脑、台式电脑。</li>
<li>三、渐进增强</li>
<li>随着屏幕大小的增加而添加元素</li>
<li>响应式网格系统随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多的12列。</li>
</ul> <br>
<h2>Bootstrap网格系统(Grid System)的工作原理</h2>
<p>网格系统通过一系列包含内容的行和列来创建页面布局。</p>
<ul><li>行必须放置在.container class内，以便获得适当的对齐(alignment)和内边距(padding)。</li>
<li>使用行来创建列的水平组。</li>
<li>内容应该放置在列内，且唯有列可以是行的直接子元素。</li>
<li>预定义的网格类，比如.row和.col-xs-4,可用于快速创建网格布局。LESS混合类可用于更多的语义布局。</li>
<li>列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过.rows上的外边距(margin)取负，表示第一列和最后一列的行偏移。</li>
<li>网格系统是通过指定想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个.col-xs-4。</li>
</ul><br>
<h2>媒体查询</h2>
<p>媒体查询是非常别致的"有条件的css规则"。它只适用于一些基于某些规定条件的css。如果满足那些条件，应用相应的样式。<br>
Bootstrap中的媒体查询允许基于视口大小移动、显示并隐藏内容。下面的媒体查询在LESS文件中使用，用来创建Bootstrap网格系统中的分界点阈值。</p><br>
<h2>网格选项</h2>
<p>下表总结了Bootstrap网格系统如何跨多个设备工作：</p>
<table width="100%" cellpadding="1" cellspacing="2" border="5px">
<tr><td></td>
<td>超小设备手机(<768px)</td>
<td>小型设备平板电脑(>=786px)</td>
<td>中型设备台式电脑(>=992px)</td>
<td>大型设备台式电脑(>=1200px)</td>
</tr>
<tr><td>网格行为</td>
<td>一直都是水平的</td>
<td>以折叠开始，断点以上的是水平的</td>
<td>以折叠开始，断点以上的是水平的</td>
<td>以折叠开始，断点以上的是水平的</td>
</tr>
<tr><td>最大容器宽度</td>
<td>None(auto)</td>
<td>750px</td>
<td>970px</td>
<td>1170px</td>
</tr>
<tr><td>Class前缀</td>
<td>.col-xs-</td>
<td>.col-sm-</td>
<td>.col-md-</td>
<td>.col-lg-</td>
</tr>
<tr><td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
<tr><td>最大列宽</td>
<td>Auto</td>
<td>60px</td>
<td>78</td>
<td>95px</td>
</tr>
<tr><td>间隙宽度</td>
<td>30px(一个列的每边分别15px)</td>
<td>30px(一个列的每边分别15px)</td>
<td>30px(一个列的每边分别15px)</td>
<td>30px(一个列的每边分别15px)</td>
</tr>
<tr><td>可嵌套</td>
<td>YES</td>
<td>YES</td>
<td>YES</td>
<td>YES</td>
</tr>
<tr><td>偏移量</td>
<td>YES</td>
<td>YES</td>
<td>YES</td>
<td>YES</td>
</tr>
<td>列排序</td>
<td>YES</td>
<td>YES</td>
<td>YES</td>
<td>YES</td>
</td>
</table><br>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap CSS概览代码文字标注篇的更多相关文章
- （二）Bootstrap CSS 概览
在这一章中,我们将讲解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML 5 文档类型(Doctype) Bootstrap 使用了一些 H ...
- Bootstrap CSS概览
HTML5文档类型(<!DOCTYPE html>) Bootstrap前端框架使用了HTML5和CSS属性,为了让这些能正常工作,您需要使用HTML5文档类型(<!DOCTYPE ...
- 2.Bootstrap CSS
Bootstrap CSS 一.Bootstrap CSS概览 移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动 ...
- Bootstrap<基础一> CSS 概览
HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 B ...
- Bootstrap CSS 栅格、代码和表格
一.bootstrap栅格 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. Bootstrap 网格系统(G ...
- html+css复习之第3篇 | jquery | bootstrap
html+css复习之第3篇 | jquery | bootstrap
- 响应式开发(四)-----Bootstrap CSS----------Bootstrap CSS概览和相关注意事项
本章先记录一些与Bootstrap CSS相关的一些特点和注意事项以及兼容性. HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正 ...
- bootstrap -- css -- 文字、列表
文字 <small></small>:呈现小号字体效果. <big></big>:程序大号字体效果 <abbr></abbr>: ...
- JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
随机推荐
- SQLServer的数据存储结构01 文件与文件组
在SQLServer中,每当新建一个数据库时,则会有一组相应的SQLServer文件被创建,这些单独的SQLServer文件构成的总体称为文件组. 一个数据库对应着一个文件组,在这个文件组里,会包括三 ...
- Java中如何获取spring中配置文件.properties中属性值
通过spring配置properties文件 1 2 3 4 5 6 7 8 9 <bean id="propertyConfigurer" class="co ...
- C++编程小知识随手记
C++编程小知识点: (1)queue和vector类型: 加入元素 : queue是queue.push(),vector是vector.push_back(), 删除元素: queue是queue ...
- [Java] 特殊正则－替换字符串
public class Test { public static void main(String[] args) { String str = "2412rhttp://192.168. ...
- css学习笔记 3
css选择符: 通配选择符:* 类选择符:.className 标签选择符 后代选择符:例:p strong ,选择的是p标签内的所有strong标签. 子选择符:> ,只选择父标签内的直接子标 ...
- 网站整站下载工具—HTTrack Website Copier
HTTrack是一个免费和易用的离线浏览工具(浏览器),它可以允许你下载整个WWW网站至本地目录,并且通过遍历网站目录获取HTML,图片和其他文件,是安全渗透测试和居家旅行必备软件. WinHTTra ...
- 51nod 1244 莫比乌斯函数之和
题目链接:51nod 1244 莫比乌斯函数之和 题解参考syh学长的博客:http://www.cnblogs.com/AOQNRMGYXLMV/p/4932537.html %%% 关于这一类求积 ...
- 深入浅出Mybatis系列（三）---配置详解之properties与environments（mybatis源码篇）
上篇文章<深入浅出Mybatis系列(二)---配置简介(mybatis源码篇)>我们通过对mybatis源码的简单分析,可看出,在mybatis配置文件中,在configuration根 ...
- 转：spl_autoload_register与autoload的区别详解
转:http://www.poluoluo.com/jzxy/201306/209614.html spl_autoload_register(PHP 5 >= 5.1.2)spl_autolo ...
- SwitchHosts—hosts管理利器
SwitchHosts是一个管理.快速切换Hosts小工具,开源软件,一键切换Hosts配置,非常实用,高效.开发Web过程成,部署有多套环境,网址域名都相同,部署在不同的服务器上,有开发环境.测试环 ...