<!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="../../cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Optional Bootstrap Theme -->
<link href="data:text/css;charset=utf-8," data-href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">
<link href="../assets/css/patch.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="../assets/css/docs.min.css" rel="stylesheet">
<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../assets/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.0/html5shiv.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 class="sr-only sr-only-focusable" href="#content">Skip to main content</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="../index.htm" class="navbar-brand">Bootstrap</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
<a href="../getting-started/index.htm">起步</a>
</li>
<li class="active">
<a href="index.htm">全局 CSS 样式</a>
</li>
<li>
<a href="../components/index.htm">组件</a>
</li>
<li>
<a href="../javascript/index.htm">JavaScript 插件</a>
</li>
<li>
<a href="../customize/index.htm">定制</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../../job.bootcss.com" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'doc-home-navbar-job'])" target="_blank">高薪工作</a></li>
<li><a href="../../expo.bootcss.com" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'doc-home-navbar-expo'])" target="_blank">优站精选</a></li>
<li><a href="../../blog.getbootstrap.com" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'doc-home-navbar-blog'])" target="_blank">官方博客</a></li>
</ul>
</nav>
</div>
</header>
<!-- Docs page layout -->
<div class="bs-docs-header" id="content">
<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>
<h3 id="overview-doctype">HTML5 文档类型</h3>
<p>Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。</p>
<div class="highlight"><pre><code class="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>
<h3 id="overview-mobile">移动设备优先</h3>
<p>在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，<strong>Bootstrap 是移动设备优先的</strong>。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。</p>
<p>为了确保适当的绘制和触屏缩放，需要在 <code><head></code> 之中<strong>添加 viewport 元数据标签</strong>。</p>
<div class="highlight"><pre><code class="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="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>
<h3 id="overview-type-links">排版与链接</h3>
<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>
<h3 id="overview-normalize">Normalize.css</h3>
<p>为了增强跨浏览器表现的一致性，我们使用了 <a href="../../necolas.github.io/normalize.css/index.htm" target="_blank">Normalize.css</a>，这是由 <a href="../../twitter.com/necolas/index.htm" target="_blank">Nicolas Gallagher</a> 和 <a href="../../twitter.com/jon_neal/index.htm" target="_blank">Jonathan Neal</a> 维护的一个CSS 重置样式库。</p>
<h3 id="overview-container">布局容器</h3>
<p>Bootstrap 需要为页面内容和栅格系统包裹一个 <code>.container</code> 容器。我们提供了两个作此用处的类。注意，由于 <code>padding</code> 等属性的原因，这两种 容器类不能互相嵌套。</p>
<p><code>.container</code> 类用于固定宽度并支持响应式布局的容器。
http.v3.bootcss.com.rar （86个子文件） 
http.v3.bootcss.com static.bootcss.com expo img 8 9f 
4d3d736e2845969ae8fd982e3899e.jpg 305KB 6e 4a5e1cc71a408729fb2cc3f476afb.jpg 433KB 0 ed 5cf513a0a7350812ba93e12ee68b4.jpg 358KB a3 e21a74ecc7132c339e136a92af63a.jpg 222KB b6 8bf47eb90f77181f6229fcdc5a247.jpg 539KB 1 89 84afe5c05e1f54db03b168e73bdbc.jpg 408KB 45 90ae82a809c150fd7795b2d5dfd41.jpg 868KB 5 f1 94a9c497c47468f8654ecab841247.jpg 258KB c 20 b1df3bb373610fab4cb635c3ceba3.jpg 727KB 7 b5 f9c2f01fad1f23574156e0577a06c.jpg 208KB 9 10 aa0f5e47743eb3757b7cb06c29444.jpg 96KB ff 2b88de566722366fffbb12ca7803a.jpg 300KB 2 ef 7b63f570fa057375f48f4d27b96e7.jpg 2MB f4 590175447e5519da7a9e04871cf3a.jpg 233KB f 2b 9113955515ec78e3ba7dc86f6d882.jpg 175KB 80 8ac1e8d1c0bd6f8312afbacc52750.jpg 311KB 4 94 58c3042fe43fd2f3ae42f1658dfbf.jpg 950KB job.bootcss.com assets css 
app.min.css 119KB index.htm 52KB v3.bootcss.com css index.htm 276KB
apple-touch-icon.png 6KB assets css patch.css 432B docs.min.css 21KB img sass-less.png 14KB devices.png 6KB components.png 3KB js ie-emulation-modes-warning.js 2KB ie10-viewport-bug-workaround.js 694B customize.min.js 764KB docs.min.js 42KB index.htm 10KB about index.htm 16KB javascript index.htm 179KB examples screenshots 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 components index.htm 268KB customize index.htm 124KB getting-started index.htm 64KB favicon.ico 5KB expo.bootcss.com assets css site.min_010B612D.css 4KB img 
loader_010B612D.gif 1KB js index.min_010B612D.js 1KB index.htm 19KB cdn.bootcss.com bootstrap 3.3.0 css bootstrap.min.css 111KB fonts glyphicons-halflings-regular_00000000.eot 20KB glyphicons-halflings-regular.woff 23KB glyphicons-halflings-regular.ttf 40KB glyphicons-halflings-regular.eot 20KB
glyphicons-halflings-regular.svg 61KB js bootstrap.min.js 34KB 2.3.2 css bootstrap-responsive.min.css 16KB bootstrap.min.css 104KB js bootstrap.min.js 28KB 3.2.0 css bootstrap.min.css 107KB js bootstrap.min.js 31KB jquery 1.11.1 jquery.min.js 94KB Metrize-Icons 1.0.0 style.css 21KB font-awesome 4.1.0 css font-awesome.min.css 20KB 4.2.0 css font-awesome.min.css 21KB holder 2.0 holder.min.js 7KB scrollup 2.4.0 jquery.scrollUp.min.js 2KB handlebars.js 2.0.0 handlebars.min.js 47KB magnific-popup.js 0.9.9 magnific-popup.css 8KB jquery.magnific-popup.min.js 20KB jquery.lazyload 1.9.0 jquery.lazyload.min.js 3KB v2.bootcss.com assets css docs.css 22KB js application.js 4KB google-code-prettify prettify.js 13KB prettify.css 817B index.htm 10KB
- 1
- 2
- 3
- 4
- 5
- 6
前往页