BootStrap基础

BootStrap基础

1.BootStrap的概述

1.1.什么是BootStrap

1.2.BootStrap的优势

1.3.什么是响应式布局

响应式布局：WEB页面会随着浏览器的分辨率来自动适配！！！

2.BootStrap的环境搭建

2.1.下载BootStrap

2.2.BootStrap的目录结构

2.3.BootStrap的简介模板

在这里，您可以看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，用于让一个常规的 HTML 文件变为使用了 Bootstrap 的模板

3.BootStrap布局组件

3.1表格

3.1.1表格类

条纹表格通过添加 .table-striped class，您将在 内的行上看到条纹，如下面的实例所示：

边框表格通过添加 .table-bordered class，您将看到每个元素周围都有边框，且占整个表格是圆角的，如下面的实例所示：

悬停表格通过添加 .table-hover class，当指针悬停在行上时会出现浅灰色背景，如下面的实例所示：

精简表格通过添加 .table-condensed class，行内边距（padding）被切为两半，以便让表看起来更紧凑，如下面的实例所示。这在想让信息看起来更紧凑时非常有用。

3.1.2.上下文类

3.1.3.响应式表格

通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。

3.2.表单

Bootstrap提供了下列类型的表单布局：

垂直表单（默认） 内联表单 水平表单

3.2.1.垂直或基本表单

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：

向父

复选框（Checkbox）复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。

默认的复选框和单选按钮的实例

选择框（Select）

当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。使用 展示列表选项，通常是那些用户很熟悉的选择列表，比如州或者数字。 使用 multiple="multiple" 允许用户选择多个选项。

静态控件当您需要在一个水平表单内的表单标签后放置纯文本时，请在上使用 class .form-control-static。

Email

email@example.com

密码