Bootstrap响应式Web前端开发最新章节_王红著

1.3 Bootstrap的下载及使用

使用Bootstrap开发网页之前，首先要了解Bootstrap是如何下载的。本书主要讲解Bootstrap 4.3版本。

1.3.1 Bootstrap的下载

（1）打开浏览器，在地址栏中输入Bootstrap官方网址，进入Bootstrap官方网站主页，具体页面如图1-3所示。

Bootstrap的下载

图1-3　Bootstrap官网主页

（2）在主页中单击“Download”按钮进入下载页面，具体如图1-4所示。

图1-4　Bootstrap下载页面

在Bootstrap下载页面中，有两个文件可供下载，第一个是编译版的Bootstrap文件，该文件中包含了编译并经过压缩的CSS文件和JavaScript文件，这些文件在下载后可以直接使用；第二个则是Bootstrap的源码文件，使用时用户需要利用下载的Sass、JavaScript源码和文档文件，通过自己的资源编译流程编译Bootstrap。

1.3.2 Bootstrap的文件结构

1．预编译的Bootstrap的文件结构

下载完Bootstrap文件以后，需要将文件解压。解压后，可以看到Bootstrap的文件结构如图1-5所示。

Bootstrap的文件结构

图1-5　Bootstrap的文件结构

在图1-5所示的Bootstrap文件结构中，所有的bootstrap.*.map文件为源映射文件，该文件可用作某些浏览器开发人员的工具；而bootstrap.min.*文件是预编译且压缩后的文件，用户可以根据自己的需要引用。Bootstrap有一些用于包含部分或全部预编译的CSS和JavaScript的选项，具体如表1-1和表1-2所示。

表1-1　Bootstrap中用于包含部分或全部预编译的CSS的选项

表1-2　Bootstrap中用于包含部分或全部预编译的JavaScript的选项

2．Bootstrap源码文件结构

图1-6所示为源码版的Bootstrap文件结构，其中dist文件夹内放置着预编译的Bootstrap下载文件；js文件夹和scss文件夹中放置着JavaScript和CSS的源码；site文件夹中的.docs文件为开发者文件；其他文件则是为整个Bootstrap开发、编译提供支持的文件，其中包含授权信息、支持文档等。

Bootstrap的使用

图1-6　源码版的Bootstrap文件结构

1.3.3 Bootstrap的使用

首先需要将Bootstrap引入自己的文档，然后才能使用Bootstrap中的组件等内容。一个使用Bootstrap的基本HTML模板如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <title>Title</title>
 <link href="css/bootstrap.min.css"  type="text/css" rel="styleshe et">
 <style type="text/css">
      .cont {
          background-image:  url( "bg.jpg");
          background-size: 100%  100% ;
       }
 </style>
</head>
<body>
<div class="container">
 <div class="row">
    <div class="col-12 col-sm-10 col-md-6 offset-sm-1 offset-md-3 cont">
       <h2 class="text-warning text-center">抽奖联</h2>
       <p class="small text-center">(此联投入奖箱内)</p>
       <form class=" text-left">
  <div class="form-group">
     <label for="name">姓名</label>
     <input type="text" class="form-control" id="name">
   </div>
   <div class="form-group">
      <label for="number1">交易码</label>
      <input type="text" class="form-control" id="number1">
   </div>
   <div class="form-group">
     <label for="IDnumber">身份证号</label>
     <input type="text" class="form-control" id="IDnumber">
 </div>
       </form>
    </div>
 </div>
</div>
<script type="text/javascript" src="js/jQuery-v3.4.0.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" sr c="js/bootstrap.bundle.min.js"></script>
</body>
</html>

通过上面的示例代码，读者不难看出，使用Bootstrap时，需要在HTML页面中引入Bootstrap文件，然后在HTML页面中添加网页内容，再添加类名，我们就可以调用Bootstrap中对应的标签样式了。上面代码的运行效果如图1-7所示。

图1-7　调用Bootstrap