BootStrap入门教程(一)之可视化布局

《Bootstrap入门教程(一)之可视化布局》是一篇介绍Bootstrap框架基础可视化布局的入门教程。本文将详细讲解什么是Bootstrap框架以及如何使用它快速构建网站的布局，并提供两个实例说明。

Bootstrap框架简介

什么是Bootstrap？

Bootstrap是一款免费、开源的前端框架，它基于HTML、CSS和JavaScript。Bootstrap曾是由Twitter开发的项目。Bootstrap提供了大量的组件和工具，使Web开发变得更加简单。

Bootstrap的优点

响应式的CSS框架，能够让你轻松地设计响应式布局
拥有许多内置组件库，例如按钮、表单、导航等
具有跨浏览器和跨设备的兼容性
具有轻量级、易于使用和快速开发的特点

Bootstrap的使用

下载Bootstrap

从官网 http://getbootstrap.com/ 上下载Bootstrap，解压后，在文件夹中可以看到包括CSS、JavaScript和图标等文件，这些文件就是Bootstrap所提供的基础资源。

引用Bootstrap

将Bootstrap的CSS文件和JavaScript文件引入到HTML文件中：

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Bootstrap网格系统

Bootstrap的网格系统是用于创建响应式页面布局的工具，它能够根据设备的屏幕尺寸自动适应不同的显示效果。Bootstrap的网格系统由12个列组成，用户可以根据需要组合这些列和行来构建页面布局。

网格系统的基本结构

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
</div>

上述代码中，.container是一个中心容器，.row表示一行，.col-md-4表示一个有4个列宽的列。在实际布局中，可以根据需要将col-md-4替换为其他的列宽，如col-md-6、col-md-8等。

网格系统的示例

<div class="container">
  <div class="row">
    <div class="col-md-4">左侧菜单栏，宽度为col-md-4</div>
    <div class="col-md-8">主体内容区域，宽度为col-md-8</div>
  </div>
</div>

上述示例中，左侧菜单栏占四分之一的宽度，主体内容区域占四分之三，当屏幕尺寸较小时，会自动切换为垂直布局，达到完美响应式效果。

示例一

基于Bootstrap的网格系统创建一个网站首页。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap网站首页</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <style>
    .jumbotron {
      background-image: url("https://picsum.photos/1200/600");
      background-size: cover;
      height: 600px;
      text-align: center;
      color: #fff;
      margin-bottom: 0px;
    }
    .menu {
      background-color: #f9f9f9;
      padding: 20px;
      height: 150%;
    }
    .box {
      margin: 20px;
      background-color: #f9f9f9; 
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0px 0px 15px #ccc;
    }
  </style>
</head>
<body>

  <div class="jumbotron">
    <h1>欢迎来到Bootstrap网站首页</h1>
    <p>———助力于Web开发———</p>
    <p><a href="#" class="btn btn-primary btn-lg">Learn more</a></p>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-md-3 menu">
        <h4>网站导航</h4>
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">新闻中心</a></li>
          <li><a href="#">产品展示</a></li>
          <li><a href="#">联系我们</a></li>
        </ul>
      </div>
      <div class="col-md-9">
        <div class="box">
          <h4>新闻中心</h4>
          <p>这里是新闻中心的简要介绍。</p>
          <a href="#" class="btn btn-primary">More</a>
        </div>
        <div class="box">
          <h4>产品展示</h4>
          <p>这里是产品展示的简要介绍。</p>
          <a href="#" class="btn btn-primary">More</a>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

上述代码使用了Bootstrap的网格系统、样式和组件，创建了一个简单的网站首页，其中包括jumbotron、菜单、新闻中心和产品展示等模块，达到了基本的响应式效果。

示例二

基于Bootstrap的样式和组件创建一个登录页面。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap登录页面</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <style>
    body {
      background-color: #f9f9f9;
    }
    .login {
      margin-top: 100px;
    }
    .box {
      margin: 20px;
      background-color: #fff; 
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0px 0px 15px #ccc;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="row">
      <div class="col-md-4"></div>
      <div class="col-md-4">
        <div class="login">
          <div class="box">
            <h3 class="text-center">用户登录</h3>
            <form>
              <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" class="form-control" id="username" placeholder="请输入用户名">
              </div>
              <div class="form-group">
                <label for="password">密码</label>
                <input type="password" class="form-control" id="password" placeholder="请输入密码">
              </div>
              <div class="text-center">
                <button type="submit" class="btn btn-primary">登录</button>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="col-md-4"></div>
    </div>
  </div>

</body>
</html>

上述代码使用了Bootstrap的样式和组件，创建了一个简单的登录页面，其中包括输入框、按钮等组件，以及box模块达到美观的效果。同时，由于使用了响应式的布局，该页面在不同屏幕大小的时候，会自动调整为最佳显示的布局效果。

以上是关于《Bootstrap入门教程(一)之可视化布局》的完整攻略，并提供了两个实际示例来帮助理解这项技术。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：BootStrap入门教程(一)之可视化布局 - Python技术站