第一章 bs入门
1：bootstarp简介：
--Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。
--Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
2：bootstarp网址：
--中文网址：https://www.bootcss.com/
--外文网址： http://getbootstrap.com/
3：bootstarp优点：
--移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
--浏览器支持：所有的主流浏览器都支持 Bootstrap。
--容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
--响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
4：Bootstrap 框架的内容：
--基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
--CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
--组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
--JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
--定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
5：Bootstrap文件介绍：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
6：Bootstrap基本结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
解决IE9以下浏览器不支持h5的问题
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
解决IE9以下浏览器不支媒体查询的问题
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
7：如何使用bootstarp框架：
--下载bootstarp框架
--把用到文件引入到项目当中
--熟记应用bootstarp框架里面定义好的类的作用
8：bootstarp框架的内容：
--css样式
--css组件
--js插件
第二章 栅格系统
序号 名字 类名 作用
1: 容器 .container 响应式的布局容器
大屏（>=1200px）宽度是1170px
中屏（>=992px）宽度是970px
小屏（>=768px）宽度是750px
超小屏（100%）
2: 容器 .container-fluid 流失布局布局容器
流失布局 百分百的宽
适合做移动端开发
3: 栅格系统 bs中的栅格系统将容器平均分为了12列
参数 bs中行和列的组合来创建页面
行 .row 行是放在容器中的
列 .column 列是当中行中的
大屏 .col-lg- 大屏（>=1200px）下用到的列的类名是.col-lg
中屏 .col-md- .col-md-4 表示中屏下，该元素占比是4列
小屏 .col-sm- 每一列默认左右都有15px的padding
超小屏 .col-xs- 列里面可以同时添加其他屏下的类
4: 列嵌套 子列会把会把父元素当中12份划分
5: 列偏移 .col-md-offset- .col-md-offset-4 偏移4份
6: 列排序 .col-md-push-* 和 .col-md-pull-* push由左到右,pull由右到左
7: 响应式工具 hidden- * visible- 隐藏、显示
类名 大屏 lg 中屏 md 小屏 sm 超小屏 xs
hidden-lg 隐藏 显示 显示 显示
hidden-md 显示 隐藏 显示 显示
hidden-sm 显示 显示 隐藏 显示
hidden-xs 显示 显示 显示 隐藏
visible-lg 显示 隐藏 隐藏 隐藏
visible-md 隐藏 显示 隐藏 隐藏
visible-sm 隐藏 隐藏 显示 隐藏
visible-xs 隐藏 隐藏 隐藏 显示
8：什么是栅格系统？
栅格系统又名网格系统，是有容器+行+列组成
9:容器最多容纳12列，多一列会在下一行显示，少一列，会把该列的位置空着
第三章 排版
.lead 使段落突出显示
.small 设定小文本 (设置为父文本的 85% 大小)
.page-header 给标题添加分割线//题目
.text-left 设定文本左对齐
.text-center 设定文本居中对齐
.text-right 设定文本右对齐
.text-muted 文字减弱//字体颜色为灰色
.text-primary 字体颜色为天蓝色
.text-success 字体颜色为绿色
.text-info 字体颜色为湖蓝色
.text-warning 字体颜色为咖啡色
.text-danger 字体颜色为红色
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap 段落中超出屏幕部分不换行
.text-lowercase 设定文本小写
.text-uppercase 设定文本大写
.text-capitalize 设定单词首字母大写
.initialism 显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.blockquote 段落前添加竖线样式
.pull-right 文本右对齐
.blockquote-reverse 设定引用右对齐
.list-unstyled 移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)//消除默认样式
.list-inline 将所有列表项放置同一行//类似浮动
.dl-horizontal 该类设置了浮动和偏移，应用于 <dl> 元素和 <dt> 元素中，具体实现可以查看实例
.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。
.pre-scrollable 使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442
第四章 代码
<var> 变量赋值: x = ab + y
<kbd> 按键提示： CTRL + P
<pre> 多行代码
<pre class="pre-scrollable"> 多行代码带有滚动条
<samp> 电脑程序输出: Sample output
<code> 同一行代码片段: span, div
第五章 表格
标签 作用
<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 表示一个危险的操作
上下文
类 描述
.active 对某一特定的行或单元格应用悬停颜色
.success 表示一个成功的或积极的动作
.warning 表示一个需要注意的警告
.danger 表示一个危险的或潜在的负面动作
第六章 按钮
类 作用
.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 禁用按钮
第七章 图片
类 描述
.img-rounded 为图片添加圆角 (IE8 不支持)
.img-circle 将图片变为圆形 (IE8 不支持)
.img-thumbnail 缩略图功能
.img-responsive 图片响应式 (将很好地扩展到父元素)
第八章 辅助类
文本
以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗：
类 描述
.text-muted 文字减弱//字体颜色为灰色
.text-primary 字体颜色为天蓝色
.text-success 字体颜色为绿色
.text-info 字体颜色为湖蓝色
.text-warning 字体颜色为咖啡色
.text-danger 字体颜色为红色
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap 段落中超出屏幕部分不换行
.text-lowercase 设定文本小写
.text-uppercase 设定文本大写
.text-capitalize 设定单词首字母大写
.text-muted 字体灰色
.text-primary "text-primary" 类的文本样式
.text-success "text-success" 类的文本样式
.text-info "text-info" 类的文本样式
.text-warning "text-warning" 类的文本样式
.text-danger "text-danger" 类的文本样式
背景
以下不同的类展示了不同的背景颜色。 如果文本是个链接鼠标移动到文本上会变暗：
类 描述
.bg-primary 表格单元格使用了 "bg-primary" 类
.bg-success 表格单元格使用了 "bg-success" 类
.bg-info 表格单元格使用了 "bg-info" 类
.bg-warning 表格单元格使用了 "bg-warning" 类
.bg-danger 表格单元格使用了 "bg-danger" 类、
其他
类 描述
.pull-left 元素浮动到左边
.pull-right 元素浮动到右边
.center-block 设置元素为 display:block 并居中显示
.clearfix 清除浮动
.show 强制元素显示
.hidden 强制元素隐藏
.sr-only 除了屏幕阅读器外，其他设备上隐藏元素
.sr-only-focusable 与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
.text-hide 将页面元素所包含的文本内容替换为背景图
.close 显示关闭按钮
.caret 显示下拉式功能
第九章 表单
在bs框架下有3种表单 1-默认表单 2-内联表单 3-水平排列表单
类 作用
.form-group 一个区域，一组表单，我的input是被form-group包裹的
.form-control input的宽度是百分百，是自适应的宽
.form-inline 让表单元素一行显示（内联表单）
.sr-only 是lable的类，隐藏文字
.col-sm-10 设置表单元素宽
.input-lg input宽最大高
.input-sm input宽小高
.input-xs input宽超小高
.input-group-addon
.input-group
.checkbox-inline 多选一行显示
.radio-inline 单选一行显示
disabled 禁用状态(不用写在类里面)
readonly 只读状态(不用写在类里面)
.form-control-static
.has-warning
.has-error
.has-success
第十一章 下拉菜单
下拉菜单组件的使用事项
1：先引入css
2：引入jq
3：引入js
类 作用
.dropdown 下拉菜单
.pull-right 向右对齐
.dropdown-header 添加标题
.caret 三角符号
.dropdown 指定下拉菜单，下拉菜单都包裹在 .dropdown 里
.dropdown-menu 创建下拉菜单
.dropdown-menu-right 下拉菜单右对齐
.dropdown-header 下拉菜单中添加标题
.dropup 指定向上弹出的下拉菜单
.disabled 下拉菜单中的禁用项
.divider 下拉菜单中的分割线
第十二章 按钮组建
类 作用
.btn-group 基本按钮
.btn-toolbar 该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中，一般获得更复杂的组件。 //组合成一个新的组件
.btn-group-lg,
.btn-group-sm,
.btn-group-xs 这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。
.btn-group-vertical 该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。
第十三章 按钮下拉菜单
类 作用
.btn-group 划分一组
.dropdown-toggle 在button按钮里面添加（只是一个说明，不重要）
.btn-lg 大
.btn-sm 小
.btn-xs 超小
第十四章 输入组框
类 作用
.input-group 输入框分组
.input-group-addon 输入框外添加额外的内容
.input-group-btn 输入框外添加额外的内容(主要是添加btn按钮用)
.form-control 让input框的宽百分百显示，自适应
.input-group-lg 大
.input-group-sm 小
网友评论