Bootstrap 介绍

标签: Bootstrap 起步

开始使用Bootstrap,这是世界上最受欢迎的框架,用于构建响应式移动优先的站点。


快速开始

快速引用Bootstrap:

  • 使用BootstrapCDN,由StackPath免费提供。
  • 使用包管理器或者下载源文件,前往下载页面

CSS

复制样式<link><head>里,把下面代码插入到其他样式之前。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

JS

许多组件都需要JavaScript才能运行。准确的说,需要jQueryPopper.js和我们自己的JavaScript程序。将以下<script> 代码放在页面末尾</body>之前。首先是jQuery,然后是Popper.js,然后是我们的JavaScript代码。

我们使用jQuery slim版本(瘦身简化版),但也支持完整的版本。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

入门模板

要确保页面设置最新的开发标准。也就是定义HTML5 doctype并包含viewport meta以获得正确的响应行为。代码如下:

<!-- 效果展示:https://mscoderstudio.github.io/course.examples/bootstrap/0-helloworld.html -->
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

这就是一个页面所需的全部内容。访问布局文档我们的官方示例,开始布置您网站的内容和组件。

重要的全局样式

Bootstrap使用了一些重要的全局样式和设置,使用它们时需要注意,所有这些样式几乎都针对跨浏览器的样式规范化。让我们继续深入。

HTML5 doctype

Bootstrap需要使用HTML5 doctype。没有它,你会遇到一些奇葩问题。

<!doctype html>
<html lang="en">
  ...
</html>

响应式元标记

Bootstrap被开发为移动端优先,我们首先优化移动端代码然后根据需要使用CSS 媒体查询你(media queries)进行动态缩放。要确保在所有设备正确渲染和缩放,所以需要将响应式元标记添加<head> 中。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Box-sizing

为了在CSS中更直接的调整大小,我们将全局box-sizing的值从content-box 改为border-box。这确保padding不会影响元素的最终计算宽度,但它可能会导致某些第三方软件(如Google Maps和Google Custom Search Engine)出现问题。

在极少数情况下您需要覆盖它,请使用以下内容:

.selector-for-some-widget {
  box-sizing: content-box;
}

使用上面的代码片段,嵌套元素 - 包括通过::before::after 生成的内容- 将继承box-sizing为其指定的内容.selector-for-some-widget

了解有关盒子模型和CSS Tricks大小的更多信息。

Reboot

为了改进跨浏览器呈现,我们使用Reboot来纠正浏览器和设备之间的不一致,同时为常见的HTML元素提供稍微更有意义的重置。


本文由 巨应教程  原创出品,转载请标明出处。