Bootstrap 快捷开发【前端 Bootstrap 框架】

作者：黎燃

2022 年 7 月 25 日
本文字数：1444 字
阅读完需：约 5 分钟

Bootstrap 是用于快速开发 web 应用程序和网站的前端框架。Bootstrap 基于 HTML、CSS 和 JavaScript。

基本结构

bootstrap 提供了包含网格系统、链接样式和背景的基本结构。这将在 bootstrap 的基本结构中详细解释。CSS:bootstrap 具有以下特性：全局 CSS 设置、定义基本 HTML 元素样式、可扩展类和高级网格系统。这将在引导 CSS 部分详细解释。组件：引导包含十多个可重用组件，用于创建图像、下拉菜单、导航、警告框、弹出框等。这将在布局组件部分详细解释。JavaScript 插件：bootstrap 包含十多个自定义 jQuery 插件。您可以直接或逐个包含所有插件。

实例

<div class="container">  <div class="jumbotron">    <h1>黎燃我的第一个 Bootstrap 页面</h1>    <p>黎燃</p>   </div>  <div class="row">    <div class="col-sm-4">      <h3>Column 1</h3>      <p>黎燃</p>      <p>黎燃</p>    </div>    <div class="col-sm-4">      <h3>Column 2</h3>      <p>黎燃</p>      <p>黎燃</p>    </div>    <div class="col-sm-4">      <h3>Column 3</h3>       <p>黎燃</p>      <p>黎燃</p>    </div>  </div></div>

复制代码

下载 Bootstrap

可以下载 Bootstrap 的最新版本

 http://getbootstrap.com/

复制代码

预编译的 Bootstrap

如上图，可以看到已编译的 CSS 和 JS（bootstrap.），以及已编译的压缩 CSS 和 JS（bootstrap.min.）。它还包括字形的字体，这是一个可选的引导主题。

<!DOCTYPE html><html><head>   <meta charset="utf-8">    <title>在线尝试 Bootstrap 实例</title>   <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>   <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body>
      <h1>Hello, world!</h1>
</body></html>

复制代码

超大屏幕

bootstrap 支持的另一个特性是 jumbotron。顾名思义，这个组件可以增加标题的大小，并为登录页的内容添加更多的边距。使用 jumbotron 的步骤如下：创建 with 类。用于<div>的 Jumbotron 容器。除了较大的字体外，字体重量减少到 200。

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>Bootstrap 实例 - 超大屏幕（Jumbotron）</title>  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body>
<div class="container">  <div class="jumbotron">    <h1>欢迎登陆页面！</h1>    <p>这是一个超大屏幕（Jumbotron）的实例。</p>    <p><a class="btn btn-primary btn-lg" role="button">      学习更多</a>    </p>  </div></div>
</body></html>

复制代码

运行结果如下：

为了获得全宽无圆角的大屏幕，请使用。Jumbotron 类以外的所有。容器类，如下：

<div class="jumbotron">    <div class="container">        <h1>欢迎登陆页面！</h1>        <p>这是一个超大屏幕（Jumbotron）的实例。</p>        <p><a class="btn btn-primary btn-lg" role="button">         学习更多</a>        </p>    </div></div>

复制代码

结果如下：欢迎登陆页面！这是一个超大屏幕（Jumbotron）的实例。