❮ 上一节
下一节 ❯
什么是 Bootstrap?
更新于 2024/11/28 9:26:00
Bootstrap 是最流行的 CSS 框架
用于开发响应式和移动优先的网站。
Bootstrap 4 是最新版本的 Bootstrap
Bootstrap 快速入门
更新于 2024/11/28 9:26:00
实例
My First Bootstrap
Page
Resize this page to see the responsive
effect!
London
London is the capital city of England.
It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.
Paris
Paris is
the capital of France.
The Paris area is one of the largest
population centers in Europe, with more than 12 million
inhabitants.
class="col-sm-4">
Tokyo
Tokyo is the capital of Japan.
It
is the center of the Greater Tokyo Area, and the most populous
metropolitan area in the world.
亲自试一试 »
点击 "亲自试一试" 按钮查看运行结果。
浏览器支持
Bootstrap 4 是 Bootstrap 的最新版本。
Bootstrap 4 支持除 Internet Explorer 9 之外的所有主流浏览器。
如果您需要支持 IE9 或 IE8，则必须使用 Bootstrap 3。
Bootstrap 容器
容器类是最重要的 Bootstrap 类之一。
它为 HTML 元素提供边距、填充、对齐等。
实例
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
亲自试一试 »
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.
实例
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.
亲自试一试 »
Bootstrap 文本颜色
此文本已静音。
此文本很重要。
此文本表示成功。
这个文本代表一些信息。
此文本表示警告。
此文字代表危险。
实例
This text is
muted.
This text is important.
class="text-success">This text indicates success.
class="text-info">This text represents some information.
class="text-warning">This text represents a warning.
class="text-danger">This text represents danger.
亲自试一试 »
Bootstrap 列
三个等宽列，适用于所有设备和屏幕宽度:
实例
亲自试一试 »
响应式列
三个等宽的列缩放以在小屏幕上相互堆叠:
实例
.col-sm-4
.col-sm-4
.col-sm-4
亲自试一试 »
Bootstrap 表格
斑马纹边框表格:
Firstname
Lastname
Email
John
Doe
john@example.com
Mary
Moe
mary@example.com
July
Dooley
july@example.com
实例
| Firstname |
Lastname | Email |
| John | Doe |
john@example.com |
| Mary |
Moe | mary@example.com |
| July | Dooley |
july@example.com |
亲自试一试 »
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.
实例
Success! Indicates a successful or positive action.
亲自试一试 »
Bootstrap 按钮
Bootstrap 提供了不同风格的按钮:
Basic
Primary
Secondary
Success
Info
Warning
Danger
Dark
实例
亲自试一试 »
Bootstrap 卡片
John Doe
Some example text some example text. John Doe is an architect and engineer.
See Profile
实例
亲自试一试 »
完整的 Bootstrap 教程
这是对 Bootstrap 的简短描述。
如需完整的 Bootstrap 教程，请访问 W3Schools Bootstrap 教程。
如需完整的 Bootstrap 参考，请访问 W3Schools Bootstrap 参考。
❮ 上一节
下一节 ❯
