<!DOCTYPE html>
<html lang="zh-cn">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Bootstrap - 简洁、直观、强悍、移动设备优先的前端开发框架，让web开发更迅速、简单。">
<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="author" content="王赛 <wangsai@bootcss.com>">
<title>
全局 CSS 样式 · Bootstrap 中文文档
</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Optional Bootstrap Theme -->
<link href="data:text/css;charset=utf-8," data-href="css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">
<link href="css/patch.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="css/docs.min.css" rel="stylesheet">
<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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]-->
<!-- Favicons -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" href="/favicon.ico">
<script>
var _hmt = _hmt || [];
</script>
</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content"><div class="container"><span class="skiplink-text">Skip to main content</span></div></a>
<!-- Docs master nav -->
<header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="http://v3.bootcss.com/" class="navbar-brand">Bootstrap</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="index.html">起步</a>
</li>
<li class="active">
<a href="css.html">全局 CSS 样式</a>
</li>
<li>
<a href="components.html">组件</a>
</li>
<li>
<a href="javascript.html">JavaScript 插件</a>
</li>
<li>
<a href="customize.html">定制</a>
</li>
<li><a href="http://expo.bootcss.com" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'V3导航-网站实例'])" target="_blank">网站实例</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://www.bootcss.com/" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'V3导航-Bootstrap中文网'])" target="_blank">Bootstrap中文网</a></li>
</ul>
</nav>
</div>
</header>
<!-- Docs page layout -->
<div class="bs-docs-header" id="content" tabindex="-1">
<div class="container">
<h1>全局 CSS 样式</h1>
<p>设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。</p>
</div>
</div>
<div class="container bs-docs-container">
<div class="row">
<div class="col-md-9" role="main">
<div class="bs-docs-section">
<h1 id="overview" class="page-header">概览</h1>
<p class="lead">深入了解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。</p>
<h2 id="overview-doctype">HTML5 文档类型</h2>
<p>Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html</span> <span class="na">lang=</span><span class="s">"zh-CN"</span><span class="nt">></span>
...
<span class="nt"></html></span></code></pre></div>
<h2 id="overview-mobile">移动设备优先</h2>
<p>在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，<strong>Bootstrap 是移动设备优先的</strong>。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。</p>
<p>为了确保适当的绘制和触屏缩放，需要在 <code><head></code> 之中<strong>添加 viewport 元数据标签</strong>。</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="nt">></span></code></pre></div>
<p>在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 <code>user-scalable=no</code> 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"</span><span class="nt">></span></code></pre></div>
<h2 id="overview-type-links">排版与链接</h2>
<p>Bootstrap 排版、链接样式设置了基本的全局样式。分别是：</p>
<ul>
<li>为 <code>body</code> 元素设置 <code>background-color: #fff;</code></li>
<li>使用 <code>@font-family-base</code>、<code>@font-size-base</code> 和 <code>@line-height-base</code> a变量作为排版的基本参数</li>
<li>为所有链接设置了基本颜色 <code>@link-color</code> ，并且当链接处于 <code>:hover</code> 状态时才添加下划线</li>
</ul>
<p>这些样式都能在 <code>scaffolding.less</code> 文件中找到对应的源码。</p>
<h2 id="overview-normalize">Normalize.css</h2>
<p>为了增强跨浏览器表现的一致性，我们使用了 <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a>，这是由 <a href="https://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> 和 <a href="https://twitter.com/jon_neal" target="_blank">Jonathan Neal</a> 维护的一个CSS 重置样式库。</p>
<h2 id="overview-container">布局容器</h2>
<p>Bootstrap 需要为页面内容和栅格系统包裹一
bootstrap v3 离线手册
4星 · 超过85%的资源 需积分: 0 190 浏览量
2015-05-16
22:16:06
上传
评论 1
收藏 1.33MB ZIP 举报 
bootstrap v3 离线手册.zip （83个子文件） 
bootstrap v3 离线手册 css 
patch.css 432B bootstrap.min.css 115KB docs.min.css 26KB bootstrap-theme.min.css 19KB images 
justified-nav.jpg 77KB starter-template.jpg 22KB offcanvas.jpg 110KB cover.jpg 36KB blog.jpg 119KB dashboard.jpg 103KB grid.jpg 98KB navbar-static.jpg 39KB non-responsive.jpg 60KB carousel.jpg 80KB jumbotron.jpg 99KB navbar-fixed.jpg 37KB sticky-footer.jpg 24KB sticky-footer-navbar.jpg 38KB theme.jpg 83KB navbar.jpg 40KB jumbotron-narrow.jpg 67KB sign-in.jpg 13KB
customize.html 147KB fonts glyphicons-halflings-regular.ttf 44KB index.html 74KB js jquery.min.js 94KB html5shiv.min.js 3KB ie8-responsive-file-warning.js 598B respond.min.js 4KB ie-emulation-modes-warning.js 2KB bootstrap.min.js 35KB ie10-viewport-bug-workaround.js 694B docs.min.js 43KB .idea bootstrap.iml 292B scopes scope_settings.xml 143B misc.xml 132B vcs.xml 173B .name 9B modules.xml 281B encodings.xml 171B workspace.xml 38KB css.html 313KB examples css grid.css 407B navbar-fixed-top.css 58B non-responsive.css 4KB navbar.css 102B blog.css 3KB signin.css 864B theme.css 285B carousel.css 3KB navbar-static-top.css 87B jumbotron.css 134B starter-template.css 96B cover.css 3KB offcanvas.css 1KB sticky-footer-navbar.css 745B justified-nav.css 3KB sticky-footer.css 660B dashboard.css 2KB jumbotron-narrow.css 2KB jumbotron.html 5KB starter-template.html 3KB sticky-footer.html 2KB navbar.html 4KB non-responsive.html 5KB navbar-static-top.html 4KB signin.html 2KB theme.html 25KB js offcanvas.js 140B holder.js 23KB dashboard.html 10KB sticky-footer-navbar.html 4KB blog.html 10KB offcanvas.html 7KB cover.html 3KB jumbotron-narrow.html 3KB grid.html 6KB carousel.html 11KB navbar-fixed-top.html 4KB justified-nav.html 4KB icon favicon.ico 5KB javascript.html 215KB components.html 305KB
评论3
最新资源