bootstrap总结

最新推荐文章于 2021-05-18 08:18:01 发布

原创最新推荐文章于 2021-05-18 08:18:01 发布 · 置顶 · 624 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #响应式 #插件

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Bootstrap，一个用于快速开发响应式Web应用的前端框架。内容包括Bootstrap的基础结构、CSS样式、组件、JavaScript插件及定制选项。讨论了页面主题、文本样式、图片处理、表格、表单、按钮、下拉菜单、输入框、导航栏和分页组件等关键特性，提供了丰富的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrap

一、简介

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端响应式框架。

特点：

跨设备、跨浏览器；响应式布局；提供全面的组件；内置Jquery插件；定制

包含内容：

1、基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。

2、CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。

3、组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。

4、JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。

5、定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

二、基本内容

1、页面主题

bootstrap将全局font-size设置为14px，line-height设置为1.428（即20px）；颜色设置为#333.

2、文本

(a)p、h1...h6、

内联元素使用标题字体class=“h1....h6”：span、small

设置文本对齐：class=“text-left text-center text-right text-nowrap（文本不换行）”

设置英文文本大小写：class=“text-lowercase text-uppercase text-capitalize(首字母大写)”

3、图片

图片形状：

class=“img-rounded（获得图片圆角） img-circle（整个图片变成圆形）img-thumbnail（缩略图，添加一些内边距和一个灰色的边框） img-responsive(响应式图片,设置 max-width: 100%; 和 height: auto; )”

4、表格

table：class=“table（表格基本样式，加大间距、横线） table-striped（让tbody中的一行隔一行加单色背景 table-bordered（表格加边框） table-hover（鼠标悬停））”

tr：class=“success info warning danger active（每一行的背景样式）sr-only(隐藏某一行)”

5、表单

bootstrap的3种表单布局：

垂直表单（默认）

向父 <form> 元素添加 role="form"，把标签和控件放在一个带有 class .form-group 的 <div> 中，向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。

内联表单

表单的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。

水平表单

向父 <form> 元素添加 class .form-horizontal。把标签和控件放在一个带有 class .form-group 的 <div> 中。向标签添加 class .control-label。使用栅格包裹标签和表单

bootstrap支持的表单元素包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color等。

（a）作为按钮的元素：

预定义样式：

class=“btn-default btn-success btn-info btn-warning btn-danger btn-primary btn-link”

按钮尺寸：

class="btn-xs btn-sm btn-lg"

块级按钮：

class=“btn-block”

激活状态按钮：

class="active disabled(禁用状态)"

（b）单选框和多选框

默认的：

<label>

<input type="checkbox" value="">选项 1

</label>

</div>

<label>

<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>选项 1

</label>

</div>

内联一行：对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。

<div>

<input type="checkbox" id="inlineCheckbox1" value="option1">选项 1

</label>

<input type="checkbox" id="inlineCheckbox2" value="option2">选项 2

</label>

</div

(c)下拉选

</select>

6、列表

ul和ol：class=“list-unstyled(移除默认样式) list-inline(设置成内联)”

dl（描述列表，<dt> 定义项和 <dd> 描述项）：class=“dl-horizontal（水平排列描述）”

7、连接

8、栅格系统

移动端设置：<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

布局容器：<div class="container(固定宽度，并支持响应式布局的容器。)"></div>和<div class="container-fluid(100%宽度)"></div>

列偏移：请使用 .col-md-offset-* 类，会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

列排序：请使用.col-md-push-* （右偏移）和 .col-md-pull-* （左偏移）类的内置网格列的顺序，其中 * 范围是从 1 到 11。

三、组件

1、辅助类和响应式

辅助类提供了一组类来辅助页面设计，而响应式工具则利用媒体查询来显示与隐藏某些内容。

A、文本颜色

text-success成功绿 text-danger危险红 text-info信息蓝 text-warning警告黄 text-primary主要蓝 text-muted柔和灰

B、背景色

bg-primary 主要蓝 bg-success成功绿 bg-info信息蓝 bg-warning警告黄 bg-danger危险红

C、关闭按钮

使用通用的关闭图标来关闭模态框和警告框。使用 class close 得到关闭图标。

D、三角符号

使用插入符表示下拉功能和方向。使用带有 class caret 的 <span> 元素得到该功能。

E、快速浮动

您可以分别使用 class pull-lef或 pull-right来把元素向左或向右浮动。其实就是float，使用了！Important加强了优先级。

<div class="pull-left"> 向左快速浮动 </div>

<div class="pull-right"> 向右快速浮动 </div>

F、块级居中

使用 class center-block 来居中元素。

G、清除浮动

如需清除元素的浮动，请使用 .clearfix class。

H、显示和隐藏

您可以通过使用 class .show 和 .hidden 来强行设置元素显示或隐藏（包括屏幕阅读器）。

您可以通过使用 class .sr-only 来把元素对所有设备隐藏，除了屏幕阅读器。

响应式：通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。

2、字体图标

Bootstrap捆绑了多种字体格式的字形。可以使用<i>和<span>标签来使用，也可以结合按钮。

3、下拉菜单组件

下拉菜单就是点击一个元素或按钮，触发隐藏的列表显示出来。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与下拉菜单（Dropdown） JavaScript 插件的互动来实现。如需使用下列菜单，只需要在 class .dropdown 内加上下拉菜单即可。

下拉菜单

</button>

</ul>

</div>

按钮和菜单要包裹在dropdown容器中，而作为被点击的元素按钮需要设置data-toggle="dropdown"才能生效。对于菜单部分，设置class="dropdown-menu"才能自动隐藏并添加固定样式。

设置向上触发：

设置菜单的标题，不要加超链接：

设置菜单的分割线：

设置菜单的禁用项：

4、按钮组组件

按钮组就是多个按钮集成在一个容器里形成独有的效果。

基本组件：

</div>

5、输入框组件

</div>

6、导航组件

1）导航栏

默认的导航栏：

</div>

<div>

Java

</a>

<li><a href="#">jmeter</a></li>

<li><a href="#">Jasper Report</a></li>

</ul>

</li>

</ul>

</div>

</nav>

响应式导航栏：

<button type="button" class="navbar-toggle" data-toggle="collapse"

data-target="#example-navbar-collapse">

</button>

</div>

Java <b class="caret"></b>

</a>

<li><a href="#">jmeter</a></li>

<li><a href="#">Jasper Report</a></li>

</ul>

</li>

</ul>

</div>

</nav>

（2）导航元素

标签式（class=”nav nav-tabs"）和胶囊式（class=”nav nav-pills"）导航

</ul>

带下拉菜单的标签

Java <span class="caret"></span>

</a>

<li><a href="#">Swing</a></li>

<li><a href="#">jMeter</a></li>

</ul>

</li>

</ul>

类：

nav-stacked垂直排列

nav-justified 两端对齐

7、面包屑导航

面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式，是一个简单的带有 .breadcrumb class 的列表。

8、分页组件和翻页组件

9、标签和徽章

标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签。

徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可。