Bootstrap

**Bootstrap入门指南**

Bootstrap是一款流行的前端框架，用于快速构建响应式Web应用。它提供了一套预设样式、布局和组件，使开发者能够更高效地创建现代Web应用。

###什么是Bootstrap？

Bootstrap是一个开源的HTML、CSS和JavaScript框架，由Twitter团队在2011年推出。它最初设计用于简化Twitter的前端开发，但随后被广泛应用于其他领域。Bootstrap提供了一系列预设样式、布局和组件，使开发者能够快速构建响应式Web应用。

### Bootstrap的特点* **响应式设计**: Bootstrap支持多种设备屏幕尺寸，确保您的Web应用在不同设备上都能正常显示。
* **预设样式**: Bootstrap提供了一系列预设样式，使您能够快速构建现代Web应用。
* **布局组件**: Bootstrap提供了各种布局组件，如栅格系统、导航栏和卡片等，帮助您快速构建复杂的页面结构。
* **组件库**: Bootstrap包含一个庞大的组件库，涵盖了从基本元素到复杂控件的所有内容。

### Bootstrap的安装要开始使用Bootstrap，您需要在您的项目中引入它。有两种方式可以实现：

#### 方式一：直接引入CDN您可以直接在HTML文件中引入Bootstrap的CDN（Content Delivery Network）链接：

htmlhtml<div class="container">
 <div class="row">
 <div class="col-md-4">Column1</div>
 <div class="col-md-8">Column2</div>
 </div>
</div>

#### 导航栏导航栏是Bootstrap提供的一种基本布局组件。它允许您快速构建响应式的导航菜单。

html<nav class="navbar navbar-expand-lg navbar-light bg-light">
 <a class="navbar-brand" href="#">Brand</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" id="navbarSupportedContent">
 <ul class="navbar-nav mr-auto">
 <li class="nav-item active">
 <a class="nav-link" href="#">Home</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">Link</a>
 </li>
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 Dropdown </a>
 <div class="dropdown-menu" aria-labelledby="navbarDropdown">
 <a class="dropdown-item" href="#">Action</a>
 <a class="dropdown-item" href="#">Another action</a>
 <div class="dropdown-divider"></div>
 <a class="dropdown-item" href="#">Something else here</a>
 </div>
 </li>
 </ul>
 </div>
</nav>

#### 卡片卡片是Bootstrap提供的一种基本布局组件。它允许您快速构建响应式的卡片。

html<div class="card" style="width:18rem;">
 <img src="..." class="card-img-top" alt="...">
 <div class="card-body">
 <h5 class="card-title">Card title</h5>
 <p class="card-text">Some quick example text to build on. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
 <a href="#" class="btn btn-primary">Go somewhere</a>
 </div>
</div>

### Bootstrap的预设样式下面是Bootstrap的一些预设样式：

#### 文字颜色Bootstrap提供了一系列预设文字颜色。

html<p style="color: #000;">黑色</p>
<p style="color: #333;">深灰色</p>
<p style="color: #666;">浅灰色</p>
<p style="color: #999;">淡灰色</p>
<p style="color: #ccc;">淡白色</p>
<p style="color: #fff;">白色</p>

#### 背景颜色Bootstrap提供了一系列预设背景颜色。

html<div style="background-color: #000;">黑色</div>
<div style="background-color: #333;">深灰色</div>
<div style="background-color: #666;">浅灰色</div>
<div style="background-color: #999;">淡灰色</div>
<div style="background-color: #ccc;">淡白色</div>
<div style="background-color: #fff;">白色</div>

#### 边框颜色Bootstrap提供了一系列预设边框颜色。

html<div style="border:1px solid #000;">黑色</div>
<div style="border:1px solid #333;">深灰色</div>
<div style="border:1px solid #666;">浅灰色</div>
<div style="border:1px solid #999;">淡灰色</div>
<div style="border:1px solid #ccc;">淡白色</div>
<div style="border:1px solid #fff;">白色</div>

### Bootstrap的组件库下面是Bootstrap的一些组件：

#### 按钮按钮是Bootstrap提供的一种基本组件。它允许您快速构建响应式的按钮。

htmlPrimary
Secondary
Success
Danger

#### 表单表单是Bootstrap提供的一种基本组件。它允许您快速构建响应式的表单。

html<form>
 <div class="form-group">
 <label for="exampleInputEmail1">Email address</label>
 <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
 <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">
 </div>
 <button type="submit" class="btn btn-primary">Submit</button>
</form>

#### 列表列表是Bootstrap提供的一种基本组件。它允许您快速构建响应式的列表。

html

 
Cras justo odio, etiam porta sem ut lorem.
 
Dapibus ac facilisis in, proin eu mi.
 
Nulla vitae elit libero, a pharetra augue.

### Bootstrap的响应式设计下面是Bootstrap的一些响应式设计：

#### 响应式布局Bootstrap提供了一系列预设样式，使您能够快速构建响应式布局。

html<div class="container">
 <div class="row">
 <div class="col-md-4">Column1</div>
 <div class="col-md-8">Column2</div>
 </div>
</div>

#### 响应式图像Bootstrap提供了一系列预设样式，使您能够快速构建响应式图像。

html<img src="..." class="img-fluid" alt="...">

#### 响应式表单Bootstrap提供了一系列预设样式，使您能够快速构建响应式表单。

html<form>
 <div class="form-group">
 <label for="exampleInputEmail1">Email address</label>
 <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
 <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
 </div>
 <div class="form-group">
 <label