CSS の Bootstrap框架

Bootstrap是一个用于快速开发Web界面的开源工具集，它包含HTML、CSS和JS工具。

以下是一些使用Bootstrap的方法：

通过CDN引入Bootstrap：




<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>我的第一个 Bootstrap 页面</h2>
  <p>重置视图porttitor ligula, ac mollis lorem porttitor non.</p>
</div>
 
</body>
</html>

通过npm安装Bootstrap：




npm install bootstrap

然后在你的JavaScript文件中引入它：




import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

通过下载Bootstrap源代码并在本地引入：

你可以从Bootstrap官网下载源代码，然后在你的HTML文件中引入下载的CSS和JS文件。




<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="path/to/bootstrap.min.css">
  <script src="path/to/jquery.min.js"></script>
  <script src="path/to/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>我的第一个 Bootstrap 页面</h2>
  <p>重置视图porttitor ligula, ac mollis lorem porttitor non.</p>
</div>
 
</body>
</html>

在这些例子中，我们使用了Bootstrap的container类，这是一个很常用的类，它可以让你的内容居中显示，并且在不同的屏幕尺寸下表现良好。

Bootstrap提供了许多预制的CSS类，可以让你快速设置元素的样式。你也可以通过扩展Bootstrap的LESS或Sass源代码来创建自定义样式。

Bootstrap还提供了一套响应式布局系统，它可以自动调整网页的布局以适应不同的屏幕尺寸。

Bootstrap还包含了一些JavaScript插件，如模态框、标签页、滑动条、下拉菜单等，这些可以让你的网页更加生动和互动性更强。

CSS の Bootstrap框架

评论已关闭

推荐阅读