Bootstrap的CSS使用

我就是我 2024-04-18 12:40 19阅读 0赞

Bootstrap 3 的设计目标是移动设备优先，然后才是桌面设备。这实际上是一个非常及时的转变，因为现在越来越多的用户使用移动设备。为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 **viewport meta** 标签，如下所示：

*width* 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 *device-width* 可以确保它能正确呈现在不同设备上。

*initial-scale=1.0* 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。

在移动设备浏览器上，通过为 **viewport meta** 标签添加 *user-scalable=no* 可以禁用其缩放（zooming）功能。

通常情况下，*maximum-scale=1.0* 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。

注意，这种方式我们并不推荐所有网站使用，还是要看您自己的情况而定！

`width=device-width` 表示宽度是设备屏幕的宽度。

`initial-scale=1` 表示初始的缩放比例。

shrink-to-fit=no 自动适应手机屏幕的宽度。

## 响应式图像 ##

通过添加 *img-responsive* class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。

接下来让我们看下这个 class 包含了哪些 css 属性。

在下面的代码中，可以看到*img-responsive* class 为图像赋予了 max-width: 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。

.img-responsive {
      display: block;
      height: auto;
      max-width: 100%;
    }

这表明相关的图像呈现为 *block*。当您把元素的 display 属性设置为 block，以块级元素显示。

设置 *height:auto*，相关元素的高度取决于浏览器。

设置 *max-width* 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。

如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。

## 容器类 ##

Bootstrap 4 需要一个容器元素来包裹网站的内容。

我们可以使用以下两个容器类：

*  .container 类用于固定宽度并支持响应式布局的容器。
 *  .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

![format_png][]

--------------------

## 两个 Bootstrap 4 页面 ##

## Bootstrap4 .container 实例 ##

<div class="container"> <h1>我的第一个 Bootstrap 页面</h1> <p>这是一些文本。</p> </div>

## Bootstrap4 .container-fluid 实例 ##

<div class="container-fluid"> <h1>我的第一个 Bootstrap 页面</h1> <p>使用了 .container-fluid，100% 宽度，占据全部视口（viewport）的容器。</p> </div>

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cucnVub29iLmNvbS93cC1jb250ZW50L3VwbG9hZHMvMjAxNy8xMC8xNzZCNjdCOS0wMTNDLTQyOUMtOEZEMC1CQzI0MDkwMTE1NDUuanBn?x-oss-process=image/format,png