<!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">
<meta name="description" content="Bootstrap - 简洁、直观、强悍、移动设备优先的前端开发框架，让web开发更迅速、简单。">
<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" >
<title>全局 CSS 样式 · Bootstrap 中文文档</title>
<script src="https://code.z01.com/jquery/jquery-3.2.1.min.js"></script>
<script src="style/js/docs.min.js"></script>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<link href="dist/css/font-awesome.min.css" rel="stylesheet"/>
<link href="style/css/patch.css" rel="stylesheet">
<link href="style/css/docs.min.css" rel="stylesheet">
<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="dist/js/ie-emulation-modes-warning.js"></script>
<!--[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]-->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png">
</head>
<body>
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
<!-- Docs master nav -->
<div id="scolls">
<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="/" class="navbar-brand"><i class="fa fa-home"></i></a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li><a href="index.html">Bootstrap</a></li>
<li><a href="getting-started.html">起步</a></li>
<li><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="font.html">Font Awesome奥森图标</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://www.z01.com/mb" target="_blank">模板中心</a></li>
<li><a href="http://www.z01.com" target="_blank">下载逐浪CMS</a></li>
</ul>
</nav>
</div>
</header>
</div>
<!-- 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> 容器。我们提供了两个作此用处的类。注意，由于 <code>padding</code> 等属性的原因，这两种 容器类不能互相嵌套。</p>
<p><code>.container</code> 类用于固定宽度并支持响应式布局的容器。</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
...
<span class="nt"></div></span></code></pre></div>
<p><code>.container-fluid</code> 类用于 100% 宽度，占据全部视口（viewport）的容器。</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">></span>
...
<span class="nt"></div></span></code></pre></div>
</div>
<div class="bs-docs-section">
<h1 id="grid" class="page-header">栅格系统</h1>
<p class="lead">Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包�
bootstrap4-zhcn-documentation-master.zip （763个子文件） 
bootstrap.css 194KB bootstrap.css 174KB bootstrap.min.css 157KB bootstrap.min.css 152KB bootstrap.min.css 141KB bootstrap.css 138KB font.css 137KB bootstrap.min.css 118KB zico.css 76KB zico.css 76KB zico.css 76KB zico.min.css 67KB zico.min.css 67KB zico.min.css 67KB bootstrap-grid.css 66KB animate.min.css 52KB bootstrap-grid.min.css 50KB bootstrap-grid.css 43KB font-awesome.css 37KB weui.min.css 35KB bootstrap-grid.min.css 33KB font-awesome.min.css 30KB zico_tm.css 28KB zico_tm.css 28KB zico_tm.css 28KB docs.min.css 26KB zico_tm.min.css 24KB zico_tm.min.css 24KB zico_tm.min.css 24KB docs.min.css 23KB bootstrap-theme.min.css 23KB bootstrap-theme.css 22KB docs.min.css 22KB docs.min.css 21KB docsearch.min.css 19KB docsearch.min.css 19KB docsearch.min.css 18KB style.css 9KB style.css 9KB bootstrap-switch.min.css 9KB bootstrap-reboot.css 5KB bootstrap-reboot.css 5KB zico_gov.css 4KB zico_gov.css 4KB zico_gov.css 4KB zico_gov.min.css 4KB zico_gov.min.css 4KB zico_gov.min.css 4KB bootstrap-reboot.min.css 4KB bootstrap-reboot.min.css 4KB ZL_Webup.css 3KB patch.css 2KB style.css 2KB style.css 2KB doc2017.css 2KB doc2017.css 2KB star-rating.min.css 2KB patch.css 2KB style.css 2KB style.css 2KB style.css 2KB style.css 2KB style.css 1KB style.css 1KB style.css 572B style.css 572B zi-regular.eot 261KB zi-regular.eot 261KB zi-regular.eot 261KB zi-tm.eot 252KB zi-tm.eot 252KB zi-tm.eot 252KB fontawesome-webfont.eot 162KB zi-gov.eot 136KB zi-gov.eot 136KB zi-gov.eot 136KB glyphicons-halflings-regular.eot 20KB ZoomlaICO.eot 4KB
dot.gif 1KB
css.html 300KB components.html 295KB font.html 236KB forms.html 202KB forms.html 198KB javascript.html 190KB 1.html 189KB card.html 137KB card.html 130KB customize.html 115KB navs.html 104KB navs.html 104KB grid.html 100KB dropdowns.html 98KB tables.html 90KB grid.html 88KB navbar.html 87KB navbar.html 86KB dropdowns.html 82KB tables.html 81KB modal.html 78KB共 763 条
- 1
- 2
- 3
- 4
- 5
- 6
- 8
资源评论
