Bootstrap 4教程-Getting Started - 书目录

Bootstrap 4教程-Getting Started

这是你需要包含在你的网页中以便使用Bootstrap 4.Bootstrap使用它自己的CSS和JavaScript文件,你需要链接到它。您还应该确保您的页面包含一些标准元素,如下所述。

CSS和JavaScript文件

您可以通过MaxCDN上的Bootstrap CDN(内容传送网络)直接链接到这些文件。所有的Bootstrap插件都使用JQuery,所以你需要确保你也使用它。

在文档头部放置以下样式表代码:

<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

在文档底部放置以下JavaScript文件(在结束<body>标记之前):

<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

设计和开发标准

为充分利用Bootstrap 4,请确保您的页面包含以下内容。

HTML5!DOCTYPE

您的HTML文档应该以HTML5!DOCTYPE声明开头。喜欢这个:

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

添加<meta>标记

为确保在移动设备上正确呈现和触控缩放,请添加元标记,如下所示:

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

您可以(可选)通过将内容值列表中的user-scalable = no添加到移动设备来禁用缩放功能。但是,这不被推荐。

快速入门:Bootstrap 4模板

您可以使用以下模板作为Bootstrap 4网页的基础。该模板包含必要的!DOCTYPE前导码,CSS和JS文件的链接以及元标记。

<!-- DOCTYPE -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example Template</title>
<meta charset="utf-8">
<!-- Viewport Meta Tag -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>


<!-- YOUR CONTENT STARTS HERE -->

<!-- YOUR CONTENT ENDS HERE -->

<!-- JavaScript: placed at the end of the document so the pages load faster -->
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

以上模板包含一个容器。接下来更多关于容器。

133621

 

英语原文:https://www.quackit.com/bootstrap/bootstrap_4/tutorial/getting_started_with_bootstrap.cfm 由工具自动翻译,由书目录整理