1.3.3 Bootstrap的使用_Bootstrap响应式Web前端开发-QQ阅读中文古言网

上QQ阅读APP看书，第一时间看更新

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