-
如果我们不希望相邻的两个列紧靠在一起，但又不想使用 margin 或者其他的技术手段来。这个时候就可以使用列偏移 (offset) 功能来实现。
-
使用列偏移也非常简单，只需要在列元素上添加类名
"col-md-offset-*"(星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。 -
例如，你在列元素上添加
"col-md-offset-8",表示该列向右移动8个列的宽度(要保证列与偏移列的总数不超过12，不然会导致列 断行|换行 显示)
-
列排序就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。
-
在 Bootstrap 框架的网格系统中是通过 添加类名
col-md-push-*和col-md-pull-*(其中星号代表移动的列组合数) -
左浮动往前
pull,右浮动往后push
我们让第二个盒子向右浮动1个列的距离
我们让第二个盒子向右浮动3个列的距离
- 列嵌套：你可以在一个列中添加一个或者多个行(row) 容器，然后在这个行容器中插入列。
======================================================================
-
Bootstrap 和普通的 HTML 页面一样，定义标题都是使用标签
<h1> ~ <h6>，只不过 Bootstrap 覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样， -
为了让非标题元素和标题使用相同的样式，还特意定义了
.h1 ~ .h6六个类名。同时后面可以紧跟着一行小的标题<small></small>或使用.small
Bootstrap Heading副标题
Bootstrap 标题1
副标题
-
段落是排版中的另一个重要元素之一。
-
通过
.lead来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理)。可以使用以下标签给文本做突出样式处理。 -
<small>：小号字 -
<b><strong>：加粗 -
<i><em>: 斜体
以后的你会感谢现在努力的你
以后的你会感谢现在努力的你
以后的
你会
感谢现在
努力的
你
定义了一套类名，这里称其为强调类名，这些强调嘞都是通过颜色来表示强调，具体说明如下：
-
.text-muted： 提示，使用浅灰色(#999) -
.text.primary：主要，使用蓝色(#428bca) -
.text-success：成功，使用浅绿色(#3c763d) -
.text-info：通知信息，使用浅蓝色(#31708f) -
text-warning：警告，使用黄色(#8a6d3n) -
text-danger：危险，使用褐色(#a94442)
在CSS中常常使用text-align 来实现文本的对齐风格的设置。
其中主要有四种风格
| 值 | 说明 |
| — | — |
| left | 左对齐 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
- Bootstrap 中通过定义四个类名来控制文本的对齐风格
| 类名 | 说明 |
| — | — |
| text-left | 左对齐 |
| text-right | 右对齐 |
| text-center | 居中对齐 |
| text-justify | 两端对齐 |
我居左
我居中
我居右
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份
4.8.1、无序列表
排列顺序无关紧要的一列元素。
- ...
4.8.2、有序列表
顺序至关重要的一组元素。
- ...
4.8.3、自定义列表
- 超文本标记语言
CSS- 层叠样式表是一种样式表语言
4.8.3、水平定义列表
在原有的基础加入了一些样式，使用样式
class="dl-horizontal"制作水平定义列表，当标题宽度超过 160px 时，将会显示三个省略号。- HTML称为超文本标记语言，是一种标识性的语言。
测试标题不能超过160px的宽度,否则2个点- 我在写一个水平定义列表的效果，我在写一个水平定义列表的效果。
4.8.4、去点列表
移除了默认的
list-style样式，也就是去掉了原无序列表前面的点 (去掉项目符号(编号))- ...
4.8.5、内联列表
给列表添加
class="list-inline"，把垂直列表换成水平列表，而且去掉项目符号(编号)，将所有元素放置于同一行。也可以说内联列表就是为了制作水平导航而生的。- 首页
- java学院
- 在线课堂
-
一般在个人博客上使用的较为频繁，用于显示代码的风格。在 Bootstrap 主要提供了三种代码风格：
-
使用
<code></code>来显示单行内联代码 -
使用
<pre></pre>来显示多行块代码 -
样式
pre-scrollable(height，max-height 高度固定为340px，超过则存在滚动条) -
使用
<kbd></kbd>来显示用户输入代码。如快捷键
4.9.1、单行内联代码
this is a simple code4.9.2、快捷键
使用ctrl+s保存
4.9.2、多行块代码
public class HelloWorld { public static void main(String[] args){ System.out.println("helloworld..."); } }Hello World
<h2>Hello World</h2>
- ...........
- ...........
- ...........
- ...........
- ...........
- ...........
- ...........
- ...........
- ...........
- ...........
- ...........
- ...........
Bootstrap 为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap得到表格过程种，只需要添加对应的类名就可以得到不同的表格风格。
class = "table"： 基础表格
4.10.2、附加样式
| 类名 | 说明 |
| — | — |
| table-striped | 斑马线表格 |
| table-bordered | 带边框的表格 |
| table-hover | 鼠标悬停高亮的表格 |
| table-condensed | 紧凑型表格，单元格没内距或者内距较其他表格的内距小 |
JavaSE 数据库 JavaScript 面向对象 oracle json 数组 mysql ajax 面向对象 oracle json 数组 mysql ajax
4.10.3、tr、th、td样式
提供了五种不同的类名，每种类名控制了行的不同背景颜色
| 类名 | 说明 |
| — | — |
| active | 将悬停的颜色应用在行或者单元格上 |
| success | 表示成功的操作 |
| info | 表示信息变化的操作 |
| warning | 表示一个警告的操作 |
| danger | 表示一个危险的操作 |
JavaSE 数据库 JavaScript 面向对象 oracle json 数组 mysql ajax 面向对象 oracle json 数组 mysql ajax
======================================================================
表单主要功能是用来和用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：
-
文本输入框
-
下拉选择框
-
单选按钮
-
复选按钮
-
文本域和按钮等
-
class="form-control"表单元素的样式 -
class="input-lg"：表单控件较大 -
class="input-sm"： 表单控件较小
5.1.1、输入框text
- 添加
class = "form-controll"
5.1.2、下拉选择框select
-
添加
class = "form-controll" -
多个选择设置
multiple="multuple"
北京 上海 深圳
北京 上海 深圳
北京 上海 深圳
5.1.3、文本域textarea
-
添加
class = "form-controll" -
一般都是用栅格来控制文本域的大小
5.1.4、复选框checkbox
-
垂直显示(给input标签加)：
class="checkbox" -
水平显示(给label标签加)：
class="checkbox-inline"
游戏
学习
5.1.5、单选框radio
-
垂直显示(给input标签加)：
class="radio" -
水平显示(给label标签加)：
class="radio-inline"
男
女
5.1.6、按钮
①基础样式
- 基础样式(给button标签加)：
class="btn"
按钮
②附加样式
| 类名 | 样式 |
| — | — |
|
class="btn btn-default"| 默认样式Default ||
class="btn btn-primary"| 首选项Primary ||
class="btn btn-success"| 成功Success ||
class="btn btn-info"| 一般信息Info ||
class="btn btn-warning"| 警告Warning ||
class="btn btn-danger"| 危险Danger ||
class="btn btn-link"| 链接Link |（默认样式）Default
（首选项）Primary
（成功）Success
（一般信息）Info
（警告）Warning
（危险）Danger
（链接）Link
③多标签支持
- 多标签支持：使用 a div input 等制作按钮
Button
注意：
-
虽然按钮类可以应用到
<a>和<button>元素上，但是，导航和导航条组件只支持<button>元素。 -
如果
<a>元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置role="button"属性。 -
我们总结的最佳实践是：强烈建议尽可能使用
<button>元素来获得在各个浏览器上获得相匹配的绘制效果。
④设置按钮大小
-
使用
.btn-lg、.btn-sm或.btn-xs就可以获得不同尺寸的按钮 -
class="btn-lg"大按钮 -
class="btn-sm"小按钮 -
class="btn-xs"超小按钮
（大按钮）Large button
（大按钮）Large button
（默认尺寸）Default button
（默认尺寸）Default button
（小按钮）Small button
（小按钮）Small button
（超小尺寸）Extra small button
（超小尺寸）Extra small button
⑤按钮禁用
- 为
<button>元素添加disabled="disabled"属性，使其表现出禁用状态。
Primary button
Button
5.2.1、垂直表单
基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：
-
向父元素
<form>元素 添加role="form" -
把标签和控件放在一个带有
class="form-group"的<div>中。这是获取最佳间距所必需的 -
向所有的文本元素
<input>、<textarea>、select添加class="form-control"
用户信息表
敲代码
跳舞
请选择城市 上海 北京 深圳提交
5.2.1、内联表单
- 如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向
<form>标签添加class="form-inline"。
提交
=======================================================================
-
在我们下载的 Bootstrap 加压文件中有 fonts 文件夹，里面就是我们的字体图标
-
只需将 fonts 文件夹复制到我们的项目红，我们就可以使用字体图标了
-
语法：
字体图标
- 字体图标类名地址查看，需要时去复制即可：https://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm
-
大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式
-
使用 Bootstrap 创建缩略图的步骤如下：
-
在图像周围添加带有
class="thumbnail"的<a>标签。 -
这会添加四个像素的内边距（padding）和一个灰色的边框。
-
当鼠标悬停在图像上时，会动画显示出图像的轮廓。
现在我们有了一个基本的缩略图，我们可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。具体步骤如下：
-
把带有
class="thumbnail"的<a>标签改为<div>。 -
在该
<div>内，您可以添加任何您想要添加的东西。由于这是一个<div>，我们可以使用默认的基于 span 的命名规则来调整大小。 -
如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。
Ending
Tip：由于文章篇幅有限制，下面还有20个关于MySQL的问题，我都复盘整理成一份pdf文档了，后面的内容我就把剩下的问题的目录展示给大家看一下
如果觉得有帮助不妨【转发+点赞+关注】支持我，后续会为大家带来更多的技术类文章以及学习类文章！（阿里对MySQL底层实现以及索引实现问的很多）
吃透后这份pdf，你同样可以跟面试官侃侃而谈MySQL。其实像阿里p7岗位的需求也没那么难（但也不简单），扎实的Java基础+无短板知识面+对某几个开源技术有深度学习+阅读过源码+算法刷题，这一套下来p7岗差不多没什么问题，还是希望大家都能拿到高薪offer吧。
、字体图标
-
在我们下载的 Bootstrap 加压文件中有 fonts 文件夹，里面就是我们的字体图标
-
只需将 fonts 文件夹复制到我们的项目红，我们就可以使用字体图标了
-
语法：
字体图标
- 字体图标类名地址查看，需要时去复制即可：https://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm
-
大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式
-
使用 Bootstrap 创建缩略图的步骤如下：
-
在图像周围添加带有
class="thumbnail"的<a>标签。 -
这会添加四个像素的内边距（padding）和一个灰色的边框。
-
当鼠标悬停在图像上时，会动画显示出图像的轮廓。
现在我们有了一个基本的缩略图，我们可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。具体步骤如下：
-
把带有
class="thumbnail"的<a>标签改为<div>。 -
在该
<div>内，您可以添加任何您想要添加的东西。由于这是一个<div>，我们可以使用默认的基于 span 的命名规则来调整大小。 -
如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。
Ending
Tip：由于文章篇幅有限制，下面还有20个关于MySQL的问题，我都复盘整理成一份pdf文档了，后面的内容我就把剩下的问题的目录展示给大家看一下
如果觉得有帮助不妨【转发+点赞+关注】支持我，后续会为大家带来更多的技术类文章以及学习类文章！（阿里对MySQL底层实现以及索引实现问的很多）
[外链图片转存中…(img-ToqbVXC7-1719250475381)]
[外链图片转存中…(img-5aO4WASD-1719250475381)]
吃透后这份pdf，你同样可以跟面试官侃侃而谈MySQL。其实像阿里p7岗位的需求也没那么难（但也不简单），扎实的Java基础+无短板知识面+对某几个开源技术有深度学习+阅读过源码+算法刷题，这一套下来p7岗差不多没什么问题，还是希望大家都能拿到高薪offer吧。
-
1423
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
