设计响应式网站-Bootstrap(1)

[b]

1.Bootstra介绍

2011年，twitter的“一小撮”工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap由MARK
OTTO和Jacob Thornton所设计和建立，在github上开源之后，迅速成为该站上最多人watch&fork的项目。大量工程师踊跃为该项目贡献代码，社区惊人地活跃，代码版本进化非常快速，官方文档质量极其高(可以说是优雅)，同时涌现了许多基于Bootstrap建设的网站：界面清新、简洁;要素排版利落大方。[/b]
网站相关链接（请点击）：Bootstrap中文文档

2.Bootstra的文档结构

bootstrap/
├── css/
│
├── bootstrap.css
│
├── bootstrap.min.css
├── js/
│
├── bootstrap.js
│
├── bootstrap.min.js
└── img/
├── glyphicons-halflings.png
└── glyphicons-halflings-white.png

3.默认网格系统

系统会自动分为最多12列。如下图分类：

1	1	1	1	1	1	1	1	1	1	1	1
4	4	4
4	8
6	6
12

4.什么是响应式设计？

响应式 Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。例如，您先在计算机显示器上浏览一个网站，然后再智能手机上浏览，智能手机的屏幕尺寸远小于计算机显示器，但是你却没有感觉到任何差别，两者的用户体验几乎一样，这说明这个网站在响应式设计方面做得很好。

需要添加的内容:

<span style="font-size:18px;"><span class="tag" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 0, 136);"><meta</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 0, 0);"> </span><span class="atn" style="border: 0px; margin: 0px; padding: 0px; color: rgb(102, 0, 102);">name</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; color: rgb(102, 102, 0);">=</span><span class="atv" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 136, 0);">"viewport"</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 0, 0);"> </span><span class="atn" style="border: 0px; margin: 0px; padding: 0px; color: rgb(102, 0, 102);">content</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; color: rgb(102, 102, 0);">=</span><span class="atv" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 136, 0);">"width=device-width, initial-scale=1.0"</span><span class="tag" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 0, 136);">></span></span>

<span style="font-size:18px;"><span class="tag" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 0, 136);"><link</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 0, 0);"> </span><span class="atn" style="border: 0px; margin: 0px; padding: 0px; color: rgb(102, 0, 102);">href</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; color: rgb(102, 102, 0);">=</span><span class="atv" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 136, 0);">"assets/css/bootstrap-responsive.css"</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 0, 0);"> </span><span class="atn" style="border: 0px; margin: 0px; padding: 0px; color: rgb(102, 0, 102);">rel</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; color: rgb(102, 102, 0);">=</span><span class="atv" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 136, 0);">"stylesheet"</span><span class="tag" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 0, 136);">></span></span>

5.响应式媒体查询

Bootstrap 有几个实用的用于开发对移动设备友好的布局的类.这些类可在 'responsive.less' 上看到.

.visible-phone,在宽度为 767px 及以下的手机上可见,在 979px 到 768px 的平板上隐藏不可见,在桌面上隐藏不可见,这是默认的.

.visible-tablet,在宽度为 767px 及以下的手机上隐藏不可见,在 979px 到 768px 的平板上可见,在桌面上隐藏不可见,这是默认的.

.visible-desktop,在宽度为 767px 及以下的手机上隐藏不可见,在 979px 到 768px 的平板上隐藏不可见,在桌面上可见,这是默认的.

.hidden-phone,在宽度为 767px 及以下的手机上隐藏不可见,在 979px 到 768px 的平板上可见,在桌面上可见,这是默认的.

.hidden-tablet,在宽度为 767px 及以下的手机上可见,在 979px 到 768px 的平板上隐藏不可见,在桌面上可见,这是默认的.

.hidden-desktop,在宽度为 767px 及以下的手机上可见,在 979px 到 768px 的平板上可见,在桌面上隐藏不可见,这是默认的.

下载工具包：