📌  相关文章
📜  Bootstrap-版式(1)

📅  最后修改于: 2023-12-03 14:59:33.688000             🧑  作者: Mango

Bootstrap-版式

Bootstrap是一个用于前端开发的开源工具包，内置了大量的CSS、JavaScript和HTML代码，其中包括了排版、网格系统、表单、按钮、导航、模态框、图标等常用UI组件，减少了前端开发的工作量，提高了开发效率。本文将介绍Bootstrap常用的版式。

码头导航

码头导航是网站中经常使用的一种导航方式，通常放置在页面头部。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="#">主页 <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">关于我们</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">联系我们</a>
      </li>
    </ul>
  </div>
</nav>
按钮

按钮是网站中经常使用的一种事件触发器，Bootstrap提供了多种样式和大小的按钮。

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
网格系统

Bootstrap提供了一个易于使用的网格系统，用于创建响应式布局，自适应不同屏幕大小的设备。

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4">Text 1</div>
    <div class="col-sm-4">Text 2</div>
    <div class="col-sm-4">Text 3</div>
  </div>
</div>
标签页

标签页用于在单个页面中显示多个内容，Bootstrap提供了易于使用的样式和组件。

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">标签1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">标签2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">标签3</a>
  </li>
</ul>
大屏幕滚动

大屏幕滚动用于在页面中实现滚动效果，Bootstrap提供了scrollspy插件。

<body data-spy="scroll" data-target="#navbarNav">
  <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">
          <a class="nav-link" href="#section1">Section 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section2">Section 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section3">Section 3</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container-fluid">
    <h1 id="section1">Section 1</h1>
    <p>Text 1</p>
    <h1 id="section2">Section 2</h1>
    <p>Text 2</p>
    <h1 id="section3">Section 3</h1>
    <p>Text 3</p>
  </div>
</body>

以上是Bootstrap常用的版式，学会这些版式可以快速搭建简单、美观的网站。