Bootstrap
17-2-17 9:59:56
<!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">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap 插件全部依赖 jQuery
请注意,Bootstrap 的所有 JavaScript 插件都依赖 jQuery,因此 jQuery 必须在 Bootstrap 之前引入
禁止响应式布局有如下几步:
移除 文档中提到的设置浏览器视口(viewport)的标签:<meta>。
通过为 .container 类设置一个 width 值从而覆盖框架的默认 width 设置,例如 width: 970px !important; 。请确保这些设置全部放在默认的 Bootstrap CSS 文件的后面。注意,如果你把它放到媒体查询中,也可以略去 !important 。
如果使用了导航条,需要移除所有导航条的折叠和展开行为。
对于栅格布局,额外增加 .col-xs-* 类或替换掉 .col-md-* 和 .col-lg-*。 不要担心,针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开。
禁止缩放
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
h1-h6标签 字号大小为36,30,24,18,14,12
也可以使用.h1 - .h6
P增加 .lead 可以文字加深
<p class="lead">...</p>
被删除的文本
<del>This line of text is meant to be treated as deleted text.</del>
带下划线的文本
<u>This line of text will render as underlined</u>
小号文本 设置为父容器字体大小的 85% small 类以代替
<small>This line of text is meant to be treated as fine print.</small>
着重
<strong>rendered as bold text</strong>
斜体
<em>rendered as italicized text</em>
对齐
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
改变大小写
<p class="text-lowercase">Lowercased text.</p> (小写)
<p class="text-uppercase">Uppercased text.</p> (大写)
<p class="text-capitalize">Capitalized text.</p> (首字母大写)
右对齐
<blockquote class="blockquote-reverse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
有序列表(数字)
<ol>
<li>...</li>
</ol>
无序列表(小圆点)
<ul>
<li>...</li>
</ul>
无样式列表
<ul class="list-unstyled">
<li>...</li>
</ul>
内联列表
<ul class="list-inline">
<li>...</li>
</ul>