<!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 v3 中文文档
</title>
<!-- Bootstrap core CSS -->
<link href="../../cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- Optional Bootstrap Theme -->
<link href="data:text/css;charset=utf-8," data-href="../../cdn.bootcss.com/bootstrap/3.3.5/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="../../cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="../../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" aria-controls="bs-navbar" aria-expanded="false">
<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.html" class="navbar-brand">Bootstrap</a>
</div>
<nav id="bs-navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="../getting-started/index.html" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'V3导航-起步'])">起步</a>
</li>
<li class="active">
<a href="index.html" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'V3导航-全局CSS样式'])">全局 CSS 样式</a>
</li>
<li>
<a href="../components/index.html" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'V3导航-组件'])">组件</a>
</li>
<li>
<a href="../javascript/index.html" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'V3导航-JavaScript插件'])">JavaScript 插件</a>
</li>
<li>
<a href="../customize/index.html" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'V3导航-定制'])">定制</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../index.html" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'V3导航-Bootstrap中文网'])">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 需要为页面内容和栅格系统包裹一个 <code>.container</code> 容器。我们提供了两个作此用处的类�
没有合适的资源?快使用搜索试试~ 我知道了~
Bootstrap API文档
共194个文件
css:46个
jpg:37个
html:32个
需积分: 50 23 下载量 6 浏览量
2017-09-17
23:02:30
上传
评论 1
收藏 9.03MB RAR 举报
温馨提示
本资源是完整的Bootstrap 帮助文档,这里面包含了Bootstrap3.2.0中文文档和Bootstrap-v3.3.5中文api 很适合前端开发者和新手学习查阅。
资源推荐
资源详情
资源评论
收起资源包目录
Bootstrap API文档 (194个子文件)
index.htm.back 17KB
Bootstrap-v3.3.5中文api.chm 2.56MB
Bootstrap-中文-API.chm 2.35MB
bootstrap.min.css 120KB
bootstrap.min.css 108KB
bootstrap.min.css 107KB
bootstrap-theme.min.css 23KB
bootstrap-theme.min.css 23KB
docs.min.css 22KB
docs.min.css 20KB
bootstrap-theme.min.css 18KB
non-responsive.css 5KB
non-responsive.css 3KB
carousel.css 2KB
carousel.css 2KB
cover.css 2KB
cover.css 2KB
blog.css 2KB
blog.css 2KB
justified-nav.css 2KB
justified-nav.css 2KB
dashboard.css 2KB
dashboard.css 2KB
jumbotron-narrow.css 1KB
jumbotron-narrow.css 1KB
offcanvas.css 990B
offcanvas.css 990B
signin.css 793B
signin.css 793B
sticky-footer-navbar.css 678B
sticky-footer-navbar.css 678B
sticky-footer.css 602B
sticky-footer.css 602B
patch.css 432B
grid.css 362B
grid.css 362B
theme.css 255B
theme.css 255B
jumbotron.css 127B
jumbotron.css 127B
patch.css 122B
starter-template.css 96B
starter-template.css 96B
navbar.css 90B
navbar.css 90B
navbar-static-top.css 78B
navbar-static-top.css 78B
navbar-fixed-top.css 52B
navbar-fixed-top.css 52B
glyphicons-halflings-regular.eot 20KB
glyphicons-halflings-regular.eot 20KB
glyphicons-halflings-regular.eot 20KB
glyphicons-halflings-regular.eot- 20KB
glyphicons-halflings-regular.eot- 20KB
index.htm 281KB
index.htm 266KB
index.htm 181KB
index.htm 128KB
index.htm 81KB
index.htm 29KB
index.htm 28KB
index.htm 27KB
index.htm 26KB
index.htm 11KB
index.htm 11KB
index.htm 10KB
index.htm 10KB
index.htm 7KB
index.htm 7KB
doc_index.htm 7KB
index.htm 6KB
index.htm 5KB
index.htm 5KB
index.htm 5KB
index.htm 5KB
index.htm 4KB
index.htm 4KB
index.htm 4KB
index.htm 4KB
index.htm 3KB
index.htm 3KB
index.htm 2KB
index.html 302KB
index.html 298KB
index.html 203KB
index.html 140KB
index.html 72KB
index.html 26KB
index.html 17KB
index.html 11KB
index.html 11KB
index.html 11KB
index.html 10KB
index.html 9KB
index.html 7KB
index.html 7KB
index.html 6KB
index.html 5KB
index.html 5KB
index.html 5KB
共 194 条
- 1
- 2
资源评论
zxw915288730
- 粉丝: 1
- 资源: 11
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功