CSS 概述

优质

小牛编辑

133浏览

2023-12-01

本章概述了Bootstrap基础架构的关键部分，包括Bootstrap实现更好，更快，更强大的Web开发的方法。

HTML5 doctype

Bootstrap使用某些HTML元素和需要使用HTML5 doctype的CSS属性。因此，在使用Bootstrap的所有项目的开头包含HTML5 doctype的下面一段代码。

<!DOCTYPE html>
<html>
   ....
</html>

自从Bootstrap 3推出以来，Bootstrap已经成为首个移动设备。这意味着可以在整个库中找到“移动优先”样式，而不是在单独的文件中找到它们。您需要将viewport meta tag到《head》元素，以确保在移动设备上正确呈现和触摸缩放。

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

将user-scalable = no添加到content属性以禁用移动设备上的缩放功能，如下所示。用户只能滚动而不能使用此更改进行缩放，从而使您的网站感觉更像本机应用程序。

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

通常， maximum-scale = 1.0与user-scalable = no一起使用。如上所述， user-scalable = no可能会为用户提供更像本机应用程序的体验，因此Bootstrap不建议使用此属性。

Bootstrap 3允许您通过添加类“ .img-responsive 《img》标记来使图像响应。此类适用于max-width: 100%; 和height: auto; 到图像，以便它很好地缩放到父元素。

<img src = "..." class = "img-responsive" alt = "Responsive image">

Bootstrap设置基本的全局显示（背景），排版和链接样式 -

Basic Global display - 设置background-color: #fff; 在《body》元素上。
Typography - 使用@font-family-base ， @font-size-base和@line-height-base属性作为排版基础。
Link styles - 通过属性@link-color设置全局链接颜色，并仅在:hover应用链接下划线:hover 。

如果您打算使用LESS代码，您可以在scaffolding.less找到所有这些代码。

Bootstrap使用Normalize来建立跨浏览器的一致性。

Normalize.css是CSS重置的现代HTML5替代品。它是一个小型CSS文件，可在HTML元素的默认样式中提供更好的跨浏览器一致性。

使用类.container来包装页面的内容并轻松地将内容.container ，如下所示。

<div class = "container">
   ...
</div>

看一下bootstrap.css文件中的.container类 -

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

请注意，由于填充和固定宽度，容器默认情况下不可嵌套。

看一下bootstrap.css文件 -

@media (min-width: 768px) {
   .container {
      width: 750px;
   }
}

在这里你可以看到CSS有width容器的媒体查询。这有助于应用响应性，并且在容器类中相应地修改容器类以正确地呈现网格系统。