关键词：
Web前端基础：
Web前端工具：
Web前端：Bootstrap最强总结
Bootstrap基础
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的一个用于快速开发 Web 应用程序和网站的前端框架。
Bootstrap 包的内容
- 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
- CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
- 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
- JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
- 定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
下载
下载地址：Bootstrap中文网
您会看到两个按钮：
- Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
- Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
如果您使用的是未编译的源代码，您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件，Bootstrap 官方只支持 Recess，这是 Twitter 的基于 less.js 的 CSS 提示。
由于文件是被编译过和压缩过的，在独立的功能开发中，您不必每次都包含这些独立的文件。
文件结构
- 预编译的 Bootstrap
当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：
如上图所示，可以看到已编译的 CSS 和 JS（bootstrap.），以及已编译压缩的 CSS 和 JS（bootstrap.min.）。同时也包含了 Glyphicons 的字体，这是一个可选的 Bootstrap 主题 - Bootstrap 源代码
- 如果您下载了 Bootstrap 源代码，那么文件结构将如下所示
less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。
以上信息来自Bootstrap中文网
入门及使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>bootstrap入门与使用</title>
<!--boostrap的使用：
1、必须先引入bootstrap的支持 ，包括js、css、font文件
2、引入的文件必须先有jQuery的核心文件，再引入bootstrap的js文件，再引入自己的文件
3、css文件必须先引入bootstrap的css文件再引入自己的文件
4、font文件无需在页面上引入，但是需要在项目的目录中存在
-->
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<!--导入自己的js文件-->
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" />
<!--导入自己的css文件-->
</head>
<body>
<h1>bootstrap使用</h1>
</body>
</html>
注意：注意导入顺序！！！先导入Bootstrap
Bootstrap CSS部分
按钮
| 类 | 描述 |
|---|---|
| .btn | 为按钮添加基本样式 |
| .btn-default | 默认/标准按钮 |
| .btn-primary | 原始按钮样式（未被操作） |
| .btn-success | 表示成功的动作 |
| .btn-info | 该样式可用于要弹出信息的按钮 |
| .btn-warning | 表示需要谨慎操作的按钮 |
| .btn-danger | 表示一个危险动作的按钮操作 |
| .btn-link | 让按钮看起来像个链接 (仍然保留按钮行为) |
| .btn-lg | 制作一个大按钮 |
| .btn-sm | 制作一个小按钮 |
| .btn-xs | 制作一个超小按钮 |
| .btn-block | 块级按钮(拉伸至父元素100%的宽度) |
| .active | 按钮被点击 |
| .disabled | 禁用按钮 |
按钮实例
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap 按钮</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<!--任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。
但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：
以下样式可用于<a>, <button>, 或 <input> 元素上：
-->
<h1>不同样式的按钮</h1>
<button type="button" class="btn btn-default">标准按钮</button>
<button type="button" class="btn btn-primary">原始按钮</button>
<button type="button" class="btn btn-success">成功按钮</button>
<button type="button" class="btn btn-info">信息按钮</button>
<button type="button" class="btn btn-warning">警告按钮</button>
<button type="button" class="btn btn-danger">危险按钮</button>
<button type="button" class="btn btn-link">链接按钮</button>
<h1>大小不同的按钮</h1>
<button type="button" class="btn btn-info btn-xs">xs按钮</button>
<button type="button" class="btn btn-success btn-sm">sm按钮</button>
<button type="button" class="btn btn-danger btn-lg">lg按钮</button>
<button type="button" class="btn btn-warning btn-block">block按钮</button>
<h1>不同状态的按钮</h1>
<button type="button" class="btn btn-default">标准按钮</button>
<button type="button" class="btn btn-default active">标准激活按钮按钮</button>
<button type="button" class="btn btn-primary">原始按钮</button>
<button type="button" class="btn btn-primary active">原始激活按钮</button>
<button type="button" class="btn btn-default">标准按钮</button>
<button type="button" class="btn btn-default disabled">标准禁用按钮按钮</button>
<button type="button" class="btn btn-primary">原始按钮</button>
<button type="button" class="btn btn-primary disabled">原始禁用按钮</button>
<input type="button" class="btn btn-info" value="input按钮"/>
<a href="01-bootstrap-入门与使用.html" class="btn btn-info" >a链接</a>
</body>
</html>
效果图
表格
Bootstrap 提供了一个清晰的创建表格的布局
Bootstrap 支持的表格元素
| 标签 | 描述 |
|---|---|
| < table> | 为表格添加基础样式 |
| < thead> | 表格标题行的容器元素（< tr>），用来标识表格列 |
| < tbody> | 表格主体中的表格行的容器元素（< tr> |
| < tr> | 一组出现在单行上的表格单元格的容器元素（< td> 或 < th>） |
| < td> | 默认的表格单元格 |
| < th> | 特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 < thead> 内使用 |
| < caption> | 关于表格存储内容的描述或总结 |
表格类
下表样式可用于表格中：
| 标签 | 描述 |
|---|---|
| .table | 为任意 < table> 添加基本样式 (只有横向分隔线) |
| .table-striped | 在 < tbody> 内添加斑马线形式的条纹 ( IE8 不支持) |
| .table-bordered | 为所有表格的单元格添加边框 |
| .table-hover | 在 < tbody> 内的任一行启用鼠标悬停状态 |
| .table-condensed | 让表格更加紧凑 |
< tr>, < th> 和 < td> 类
下表的类可用于表格的行或者单元格
| 类 | 描述 |
|---|---|
| .active | 将悬停的颜色应用在行或者单元格上 |
| .success | 表示成功的操作 |
| .info | 表示信息变化的操作 |
| .warning | 表示一个警告的操作 |
| .danger | 表示一个危险的操作 |
实例
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap表格</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover table-condensed">
<tr class="danger">
<th>序号</th><th>商品名称</th><th>商品价格</th><th>商品数量</th><th>总计</th><th>操作</th>
</tr>
<tr>
<td class="warning">1</td>
<td class="info">【明治夹心饼干】明治(Meiji) 小熊饼干 草莓夹心 15分钟可以摇成球 新加坡进口 网红儿童零食50g_10盒办公室下午茶点心</td>
<td class="active">￥129.8</td>
<td class="success">1</td>
<td>￥129.8</td>
<td><button type="button">删除</button></td>
</tr>
<tr>
<td>2</td>
<td>【明治夹心饼干】明治(Meiji) 小熊饼干 草莓夹心 15分钟可以摇成球 新加坡进口 网红儿童零食50g_10盒办公室下午茶点心</td>
<td>￥129.8</td>
<td>1</td>
<td>￥129.8</td>
<td><button type="button">删除</button></td>
</tr>
<tr>
<td>3</td>
<td>【明治夹心饼干】明治(Meiji) 小熊饼干 草莓夹心 15分钟可以摇成球 新加坡进口 网红儿童零食50g_10盒办公室下午茶点心</td>
<td>￥129.8</td>
<td>1</td>
<td>￥129.8</td>
<td><button type="button">删除</button></td>
</tr>
</table>
</div>
</body>
</html>
效果图
表单
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单
表单布局类型：
- 垂直表单（默认）
- 内联表单
- 水平表单
垂直或基本表单
基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：
- 向父 < form> 元素添加 role=“form”
- 把标签和控件放在一个带有 class .form-group 的 < div> 中。这是获取最佳间距所必需的
- 向所有的文本元素 < input>、< textarea> 和 < select> 添加 class .form-control
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 基本表单</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name"
placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form查看详情
web前端：css最强总结附详细代码(代码片段)
...xff1a;JQuery最强总结（附上详细代码）Web前端：Bootstrap最强总结附详细代码Web前端 查看详情
web前端：javascript最强总结附详细代码（带常用案例！）(代码片段)
...ff1a;Web前端：JQuery最强总结附上详细代码Web前端：Bootstrap最强总结附详细代码Web前端：JavaScript最强总结 查看详情
web前端：jquery最强总结（每个要点都附带完全案例详细代码！）(代码片段)
...：Web前端：JQuery最强总结附详细代码Web前端：Bootstrap最强总结附详细代码JQuery最强总结概念知识框架安装版本问题下载jQue 查看详情
web前端：javascript最强总结附详细代码（带常用案例！）(代码片段)
...ff1a;Web前端：JQuery最强总结附上详细代码Web前端：Bootstrap最强总结附详细代码Web前端：JavaScript最强总结基本概念概念作用用法JavaScript显示数据JavaScript的注释JavaScript基本语法JavaScript的语句JavaScript的数据类型值类型(基... 查看详情
web前端：jquery最强总结（每个要点都附带完全案例详细代码！）(代码片段)
...：Web前端：JQuery最强总结附详细代码Web前端：Bootstrap最强总结附详细代码JQuery最强总结概念知识框架安装版本问题下载jQuery的使用jQuery语法结构基础语法文档就绪事件jQuery选择器元素/标签选择器id选择器class选择器全... 查看详情
springboot搭建web项目（前后端分离，附项目源代码地址）
...后端分离，利用ajax交互。springBoot-example-ui前端html技术：BootStrap + layer + jquery + 查看详情
万字spring框架学习总结（附核心代码详细注释）(代码片段)
Spring学习笔记总结学习视频地址：动力节点视频1.Spring概述1.1Spring框架是什么？Spring框架是一个开放源代码的J2EE应用程序框架，由[RodJohnson](https://baike.baidu.com/item/RodJohnson/1423612)发起，是针对bean的生命周期进行管... 查看详情
sql知识点详细总结（附操作图解）(代码片段)
目录查询已有数据库和表SELECT语句+列名称查询列SELECT语句+AS关键字设定别名SELECT语句+常数SELECT语句+DISTINCT删除重复行SELECT语句+LIMIT限制返回行数SELECT语句+WHERE条件选取SELECT语句+算数运算符SELECT语句+比较... 查看详情
最强面试题整理第二弹：python进阶面试题（附答案）(代码片段)
...到很多的八股文，我结合自己的经验，整理Python最强面试题。Python最强面试题主要包括以下几方面：Python基础（已完成）Python进阶（已完成）Python后台开发爬虫机器学习对每道面试题会附带详细 查看详情
最强面试题整理第二弹：python进阶面试题（附答案）(代码片段)
...到很多的八股文，我结合自己的经验，整理Python最强面试题。Python最强面试题主要包括以下几方面：Python基础（已完成）Python进阶（已完成）Python后台开发爬虫机器学习对每道面试题会附带详细 查看详情
最强面试题整理第二弹：python进阶面试题（附答案）(代码片段)
...到很多的八股文，我结合自己的经验，整理Python最强面试题。Python最强面试题主要包括以下几方面：Python基础（已完成）Python进阶（已完成）Python后台开发爬虫机器学习对每道面试题会附带详细 查看详情
最强面试题整理第一弹：python基础面试题（附答案）(代码片段)
...到很多的八股文，我结合自己的经验，整理Python最强面试题。Python最强面试题主要包括以下几方面：Python基础（已完成）Python进阶Python后台开发爬虫机器学习对每道面试题会附带详细的答案，无论是准备面... 查看详情
最强面试题整理第一弹：python基础面试题（附答案）(代码片段)
...到很多的八股文，我结合自己的经验，整理Python最强面试题。Python最强面试题主要包括以下几方面：Python基础（已完成）Python进阶Python后台开发爬虫机器学习对每道面试题会附带详细的答案，无论是准备面... 查看详情
最强面试题整理第一弹：python基础面试题（附答案）(代码片段)
...到很多的八股文，我结合自己的经验，整理Python最强面试题。Python最强面试题主要包括以下几方面：Python基础（已完成）Python进阶Python后台开发爬虫机器学习对每道面试题会附带详细的答案，无论是准备面... 查看详情
最强面试题整理第三弹：python后台开发面试题（附答案）(代码片段)
...到很多的八股文，我结合自己的经验，整理Python最强面试题。Python最强面试题主要包括以下几方面：Python基础（已完成）Python进阶（已完成）Python后台开发爬虫机器学习对每道面试题会附带详细 查看详情
最强面试题整理第三弹：python后台开发面试题（附答案）(代码片段)
...到很多的八股文，我结合自己的经验，整理Python最强面试题。Python最强面试题主要包括以下几方面：Python基础（已完成）Python进阶（已完成）Python后台开发爬虫机器学习对每道面试题会附带详细 查看详情
前端h5框架总结
关于单独h5网站项目，目前主要前端框架有：react、vue、bootstrap等，其中react和vue都是用mvvm模式（低耦合、可重用性、独立开发、可测试），数据实时更新，适合app里面嵌入的网页使用，但用在传统web网页上对seo不太好，因为数... 查看详情