什么是 Bootstrap?

HTML

Bootstrap 是最流行的 CSS 框架 用于开发响应式和移动优先的网站。

Bootstrap 4 是最新版本的 Bootstrap


Bootstrap 快速入门

Responsive Bootstrap Page

实例

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this page to see the responsive effect!</p>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4">
      <h2>London</h2>
      <p>London is the capital city of England.</p>
      <p>It is the most populous city in the United Kingdom,
      with a metropolitan area of over 13 million inhabitants.</p>
    </div>
    <div class="col-sm-4">
      <h2>Paris</h2>
      <p>Paris is the capital of France.</p>
      <p>The Paris area is one of the largest population centers in Europe,
      with more than 12 million inhabitants.</p>
    </div>
    <div class="col-sm-4">
      <h2>Tokyo</h2>
      <p>Tokyo is the capital of Japan.</p>
      <p>It is the center of the Greater Tokyo Area,
      and the most populous metropolitan area in the world.</p>
    </div>
  </div>
</div>
亲自试一试 »

点击 "亲自试一试" 按钮查看运行结果。



浏览器支持

Bootstrap 4 是 Bootstrap 的最新版本。

Bootstrap 4 支持除 Internet Explorer 9 之外的所有主流浏览器。

如果您需要支持 IE9 或 IE8,则必须使用 Bootstrap 3。


Bootstrap 容器

容器类是最重要的 Bootstrap 类之一。

它为 HTML 元素提供边距、填充、对齐等。

实例

<div class="container">
    <h1>This is a paragraph</h1>
    <p>This is a paragraph</p>
    <p>This is a paragraph</p>
    <p>This is a paragraph</p>
    <p>This is a paragraph</p>
</div>
亲自试一试 »

Bootstrap 颜色

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

实例

<div class="container bg-primary text-white py-4">
<p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>

<div class="container bg-success text-white py-4">
<p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>
亲自试一试 »

Bootstrap 文本颜色

此文本已静音。

此文本很重要。

此文本表示成功。

这个文本代表一些信息。

此文本表示警告。

此文字代表危险。

实例

<div class="container">
    <p class="text-muted">This text is muted.</p>
    <p class="text-primary">This text is important.</p>
    <p class="text-success">This text indicates success.</p>
    <p class="text-info">This text represents some information.</p>
    <p class="text-warning">This text represents a warning.</p>
    <p class="text-danger">This text represents danger.</p>
</div>
亲自试一试 »

Bootstrap 列

三个等宽列,适用于所有设备和屏幕宽度:

实例

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>
亲自试一试 »

响应式列

三个等宽的列缩放以在小屏幕上相互堆叠:

实例

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>
亲自试一试 »

Bootstrap 表格

斑马纹边框表格:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

实例

 <table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@example.com</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>july@example.com</td>
    </tr>
  </tbody>
</table>
亲自试一试 »

Bootstrap 警报

Bootstrap 提供了一种创建预定义警报消息的简单方法:

Success!  This alert box indicates a successful or positive action.
Warning!  This alert box indicates a warning that might need attention.
Danger!  This alert box indicates a dangerous or potentially negative action.
Primary!  This alert box indicates an important action.

实例

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>
亲自试一试 »

Bootstrap 按钮

Bootstrap 提供了不同风格的按钮:

实例

<button type="button" class="btn">Basic</button>
<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-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
亲自试一试 »

Bootstrap 卡片

Image

John Doe

Some example text some example text. John Doe is an architect and engineer.

See Profile

实例

<div class="card" style="width:400px">
  <img src="img_avatar1.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>
亲自试一试 »

完整的 Bootstrap 教程

这是对 Bootstrap 的简短描述。

如需完整的 Bootstrap 教程,请访问 W3Schools Bootstrap 教程

如需完整的 Bootstrap 参考,请访问 W3Schools Bootstrap 参考