第一章之初识Bootstrap

第一章：初识Bootstrap

Bootstrap是一个免费开源的前端框架，可帮助开发者构建漂亮、响应式的网站、应用程序和移动设备应用程序。下面将详细介绍Bootstrap的基础知识。

1.1 下载Bootstrap

Bootstrap可以从官方网站 https://getbootstrap.com/下载。我们可以选择下载编译好的CSS和JavaScript或者使用npm进行安装。

1.2 使用Bootstrap

1.2.1 在HTML文件中引入Bootstrap

我们可以通过以下代码将BootstrapCSS和JavaScript引入头部：

<head>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>

1.2.2 布局容器

Bootstrap使用网格系统来布局。我们可以将网页布局分割为12列来构建网格系统。Bootstrap提供了多种类型的容器，包括:

container: 固定容器的宽度；
container-fluid: 容器的宽度自适应浏览器窗口大小。

示例1：一个简单的容器。

<div class="container">
    <h1>Hello, Bootstrap!</h1>
</div>

示例2：一个宽度自适应的容器。

<div class="container-fluid">
    <h1>Hello, Bootstrap!</h1>
</div>

1.3 常用UI组件

1.3.1 导航栏（Navbar）

Bootstrap提供了多种样式的导航栏，可以非常简单地创建一个响应式的导航栏。

示例：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

1.3.2 表单（Form）

Bootstrap的表单组件非常丰富，支持多种类型的表单控件。

示例：

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

结束语

以上是Bootstrap的初步介绍，可以让你快速入门Bootstrap，为以后的学习打下基础。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：第一章之初识Bootstrap - Python技术站

第一章之初识Bootstrap

第一章：初识Bootstrap

1.1 下载Bootstrap

1.2 使用Bootstrap

1.3 常用UI组件

结束语

相关文章