Bootstrap CSS 概览.pdfVIP

Bootstrap CSS 概览 Bootstrap CSS 概览 在这⼀章中，我们将讲解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得 更好、更快、更 壮的最佳实践。 HTML 5 ⽂档类型 （Doctype ） Bootstrap 使⽤了⼀些 HTML5 元素和 CSS 属性。为了让这些正常⼯作，您需要使⽤ HTML5 ⽂档类型 （Doctype ）。 因此，请在使⽤ Bootstrap 项⽬的开头包含下⾯的代 码段。 !DOCTYPE html html /html 如果在 Bootstrap 创建的⽹页开头不使⽤ HTML5 的⽂档类型 （Doctype ），您可能会 ⾯临⼀些浏览器显⽰不⼀致的问题，甚⾄可能⾯临⼀些特定情境下的不⼀致，以致于 您的代码不能通过 W3C 标准的验证。 移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化。 在之前的 Bootstrap 版本中 （直到 2.x ），您需要⼿动引⽤另⼀个 CSS ，才能让整个项 ⽬友好的⽀持移动设备。 现在不⼀样了，Bootstrap 3 默认的 CSS 本⾝就对移动设备友好⽀持。 Bootstrap 3 的设计⽬标是移动设备优先，然后才是桌⾯设备。这实际上是⼀个⾮常及 时的转变，因为现在越来越多的⽤户使⽤移动设备。 为了让 Bootstrap 开发的⽹站对移动设备友好，确保适当的绘制和触屏缩放，需要在 ⽹页的 head 之中添加 viewport meta 标签，如下所⽰： meta name=viewport content=width=device-width initial-scale=1 width 属性控制设备的宽度。假设您的⽹站将被带有不同屏幕分辨率的设备浏览，那 么将它设置为 device-width 可以确保它能正确呈现在不同设备上。 initial-scale=1.0 确保⽹页加载时，以 1:1 的⽐例呈现，不会有任何的缩放。 在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁⽤其缩 放 （zoo ing ）功能。 通常情况下，maximum-scale=1.0 与 user-scalable=no ⼀起使⽤。这样禁⽤缩放功能 后，⽤户只能滚动屏幕，就能让您的⽹站看上去更像原⽣应⽤的感觉。 注意，这种⽅式我们并不推荐所有⽹站使⽤，还是要看您⾃⼰的情况⽽定 ！ meta name=viewport content=width=device-width maximum-scale=1.0 user-scalable=no 响应式图像 img src=... class=img-responsive alt=响应式图像 通过添加 img-resp onsive class 可以让 Bootstrap 3 中的图像对响应式布局的⽀持更友 好。 接下来让我们看下这个 class 包含了哪些 css 属性。 在下⾯的代码中，可以看到img-resp onsive class 为图像赋予了 ax-width: 100%; 和 height: auto; 属性，可以让图像按⽐例缩放，不超过其⽗元素的尺⼨。 .img-responsive { display : inline-block; height: auto; max-width: 100% ; } 这表明相关的图像呈现为 inline-block 。当您把元素的 display 属性设置为 inline- block ，元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我 们可以设置宽度和⾼度。 设置 height:auto ，相关元素的⾼度取决于浏览器。 设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图⽚对响应式布 局的⽀持更友好。 全局显⽰、排版和链接 基本 全局显⽰ Bootstrap 3 使⽤ body {margin: 0; 来移除 body 的边距。 请看下⾯有关 body 的设置： body { font-family : Helvetica Neue Helvetica Arial sans-serif; font-size: 14px; line-