Bootstrap3.3.6移动优先的中文教程

需积分: 16 139 浏览量更新于2024-07-20 4 收藏 1.08MB PDF 举报

"Bootstrap3.3.6中文帮助手册" Bootstrap是一个流行的前端开发框架，用于构建响应式、移动设备优先的网页。本手册基于Bootstrap 3.3.6版本，主要涵盖了CSS样式、组件以及JavaScript插件。尽管在转换为PDF时可能会遇到一些样式问题，但这不会影响实际使用。在Bootstrap中，全局CSS样式对基本HTML元素进行了预定义，赋予了它们基础样式和增强效果。这包括设置全局背景色、字体家族、字体大小和行高。例如，`<body>`元素默认设置为背景色`#fff`，同时使用了基于变量的字体配置，如`@font-family-base`，`@font-size-base`和`@line-height-base`来确保一致的文本呈现。 Bootstrap的“HTML5文档类型”是必须的，因为它依赖于HTML5元素和CSS属性。每个页面都应该以`<!DOCTYPE html>`开头，并设定语言属性，如`<html lang="zh-CN">`，以确保正确的文档类型和语言识别。移动设备优先的设计原则是Bootstrap 3的一个核心特性。在Bootstrap 2中，移动优化是可选的，但在Bootstrap 3中，框架被重构，从一开始就考虑了移动设备。这意味着移动设备的样式已经集成到框架的每个部分，而非单独的文件。为了适应移动设备，开发者需要在<head>中添加`<meta name="viewport" content="width=device-width, initial-scale=1">`标签，以确保页面在不同设备上正确显示。此外，还可以通过设置`<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">`来禁用移动设备上的缩放功能，提供更接近原生应用的体验。但需要注意，这可能不适用于所有场景，是否禁用缩放应根据具体项目需求来决定。 Bootstrap的排版和链接样式也得到了精心设计。所有链接都有基础颜色，并在鼠标悬停时显示下划线，以提高可点击性。这种全局样式提供了基础的用户体验，同时也允许开发者根据需要进行自定义和扩展。 Bootstrap 3.3.6中文手册是开发者理解和使用这个框架的重要参考资料，它详细阐述了如何利用Bootstrap创建响应式的网页，并且特别关注了移动设备的兼容性和用户体验。无论你是初学者还是经验丰富的开发者，这份手册都能为你提供必要的指导和支持。

For example, <section> should be wrapped as inline.

复制

For example, <code><section></code> should be wrapped as inline.

用户输入

通过 <kbd> 标签标记用户通过键盘输入的内容。=

To switch directories, type cd followed by the name of the directory.

To edit settings, press ctrl + ,

复制

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>

To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

代码块

多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。

<p>Sample text here...</p>

复制

<pre><p>Sample text here...</p></pre>

还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。

变量

通过 <var> 标签标记变量。

y = mx + b

复制

程序输出

通过 <samp> 标签来标记程序输出的内容。

This text is meant to be treated as sample output from a computer program.

复制

<samp>This text is meant to be treated as sample output from a computer program.</samp>

表格

基本实例

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式

看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择

之类的插件，所以我们选择将此样式独立出来。

Optional table caption.

# First Name Last Name Username

1 Mark Otto @mdo

2 Jacob Thornton @fat

3 Larry the Bird @twitter

复制

...

</table>

状态类

通过这些状态类可以为行或单元格设置颜色。

Class 描述描述

.active

鼠标悬停在行或单元格上时所设置的颜色

.success

标识成功或积极的动作

.info

标识普通的提示信息或动作

.warning

标识警告或需要用户注意

.danger

标识危险或潜在的带来负面影响的动作

# Column heading Column heading Column heading

1 Column content Column content Column content

2 Column content Column content Column content

3 Column content Column content Column content

4 Column content Column content Column content

5 Column content Column content Column content

6 Column content Column content Column content

7 Column content Column content Column content

8 Column content Column content Column content

9 Column content Column content Column content

复制

<tr>

</tr>

向使用辅助技术的用户传达用意

通过为表格中的一行或一个单元格添加颜色而赋予不同的意义只是提供了一种视觉上的表现，并不能为使用辅助技术 --

例如屏幕阅读器 -- 浏览网页的用户提供更多信息。因此，请确保通过颜色而赋予的不同意义可以通过内容本身来表达

（即在相应行或单元格中的可见的文本内容）；或者通过包含额外的方式 -- 例如应用了 .sr-only 类而隐藏的文本 -- 来表

达出来。

响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平

滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

垂直方向的内容截断

响应式表格使用了 overflow-y: hidden 属性，这样就能将超出表格底部和顶部的内容截断。特别是，也可以截断下拉菜

单和其他第三方组件。

Firefox 和 fieldset 元素

Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式，导致响应式表格出现问题。除非使用我们下面提供的

针对 Firefox 的 hack 代码，否则无解：

复制

@-moz-document url-prefix() {

fieldset { display: table-cell; }

}

更多信息请参考 this Stack Overflow answer.

# Table heading Table heading Table heading Table heading Table heading Table heading

1 Table cell Table cell Table cell Table cell Table cell Table cell

2 Table cell Table cell Table cell Table cell Table cell Table cell

3 Table cell Table cell Table cell Table cell Table cell Table cell

# Table heading Table heading Table heading Table heading Table heading Table heading

1 Table cell Table cell Table cell Table cell Table cell Table cell

2 Table cell Table cell Table cell Table cell Table cell Table cell

3 Table cell Table cell Table cell Table cell Table cell Table cell

复制

...

</table>

</div>

表单

基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都

将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

Email address

Password

File input

Example block-level help text here.

Check me out

复制

<form>

<label for="exampleInputEmail1">Email address</label>

</div>

<label for="exampleInputPassword1">Password</label>

</div>

<label for="exampleInputFile">File input</label>

<p class="help-block">Example block-level help text here.</p>

</div>

<label>

<input type="checkbox"> Check me out

</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

不要将表单组合输入框组混合使用

不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。

内联表单

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口只适用于视口

（（viewport）至少在）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。宽度时（视口宽度再小的话就会使表单折叠）。

可能需要手动设置宽度

在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，我们将这些元素的宽度设置

为 width: auto;，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。

一定要添加 label 标签

如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为label 设置

.sr-only 类将其隐藏。还有一些辅助技术提供label标签的替代方案，比如 aria-label、aria-labelledby 或 title 属

性。如果这些都不存在，屏幕阅读器可能会采取使用 placeholder 属性，如果存在的话，使用占位符来替代其他的标

记，但要注意，这种方法是不妥当的。

Name

复制

</div>

<label for="exampleInputEmail2">Email</label>

</div>

<button type="submit" class="btn btn-default">Send invitation</button>

</form>

Email address

Password

Remember me

复制

<label class="sr-only" for="exampleInputEmail3">Email address</label>

</div>

<label class="sr-only" for="exampleInputPassword3">Password</label>

</div>

<label>

<input type="checkbox"> Remember me

</label>

</div>

</form>

Amount (in dollars)

.00

复制

<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>

</div>

剩余111页未读，继续阅读

iMrAngry

粉丝: 7
资源: 46

Bootstrap3.3.6移动优先的中文教程

Bootstrap3.3.6 中文手册-全局CSS样式

bootstrap-3.3.6版本各种包

Bootstrap3.3.6 中文手册-组件

Bootstrap 3.3.6 中文组件手册：实用功能与图标指南

Bootstrap3.3.6移动优先的全局CSS样式解析

Bootstrap中文在线手册

网吧技术培训手册

Bootstrap_v3.3.6

ace admin模版 v1.4 bootstrap 3.3.6

基于Bootstrap3.3.6的后台主题UI框架H+ v4.0.0版

最新资源