bootstarp
作者：互联网
栅格系统
一.bootstrap是通过一系列的行（row）和列（column)的组合来的
1.行row必须要包含在.container 中或.container-fluid（100%宽度）
2.可以通过row 在水平方向创建一组列 column
3.你放置的内容就当放在column中，只有列column 可以作为行row的直接子元素
4.通过列column设置padding属性，从而创建列与列之间的间距（gutter),通过为.row元素设置负值margin从而抵消掉了.container元素设置的padding。也就是间接为行row 所包含的列 column抵消掉了padding
二.屏幕大小变化（媒体查询）
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
三.栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 | None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 |
四.实例：从堆叠到水平排列
使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b0R62Wq1-1626358886721)(C:\Users\one\AppData\Roaming\Typora\typora-user-images\image-20210715110129668.png)]
列偏移：
col-md-fofset-3就是列向右偏移3格，空出来
<div class="row">
<div class="col-md-2">.col-md-4</div>
<div class="col-md-2 col-md-offset-3" style="backgroud-color:burlywood;">列偏移</div>
<div class="col-md-2">.col-md-4</div>
</div>
列排序：
向右移动class=“col-md-push-1”，后面执行的会覆盖前面的
向左 class=“col-md-pull-1” 覆盖前面的
五.对齐效果
html之前是这样设置的
<p style="text-align:right;">你好呀L</p>
bootstrap,直接用class=”text-right“
<p class="text-right"></p>
<p class="text-center">居中</p>
<p class="text-justify">两端对齐</p>
六.列表
1.去点列表
去点列表(有序列表)
<ul class="list-unstyled">
<li></li>
<li></li>
</ul>
2.内联列表
class=“list-inline”,把垂直列表设置为水平列表，并没有项目符号，编号
<ul class="list-inline">
<li></li>
<li></li>
</ul>
七.代码风格
如果前端需要加上代码风格
<code>hello word!</code>
如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gzJ1Va9o-1626358886723)(C:\Users\one\AppData\Roaming\Typora\typora-user-images\image-20210715200014728.png)]
(多行,在内部加)
<code>hello word! 魂牵梦萦J FKDSJFKDF <br> LAFJDLFJDASKFJ ASDLFDA LF</code>
或者：(当内容超过一定值时，会有滚动条)
<pre>hello word!fdalsjf lasdfjladskjf lasd jflkasd flsd </pre>
快捷键样式：
<p>使用<kbd>ctr</kbd>+<kbd>s</kbd></p>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F6E1rtnd-1626358886727)(C:\Users\one\AppData\Roaming\Typora\typora-user-images\image-20210715200448608.png)]
八.表格
<table class="table">
<tr>
<th>1</th>
<th>first name</th>
<th>last name</th>
<th>username</th>
</tr>
<tr>
<th>1</th>
<th>first name</th>
<th>last name</th>
<th>username</th>
</tr>
......
</table>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T32gid8T-1626358886731)(C:\Users\one\AppData\Roaming\Typora\typora-user-images\image-20210715212816118.png)]
条纹状表格
通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式
<table class="table table-striped">
...
</table>
鼠标悬停
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
<table class="table table-hover">
...
</table>
紧缩表格
通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
<table class="table table-condensed">
...
</table>
状态类
通过这些状态类可以为行或单元格设置颜色。
| Class | 描述 |
|---|---|
.active | 鼠标悬停在行或单元格上时所设置的颜色 |
.success | 标识成功或积极的动作 |
.info | 标识普通的提示信息或动作 |
.warning | 标识警告或需要用户注意 |
.danger | 标识危险或潜在的带来负面影响的动作 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iNWARid7-1626358886733)(C:\Users\one\AppData\Roaming\Typora\typora-user-images\image-20210715213353667.png)]
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
九.表单
1.文本框
.form-control 表单元素的样式
表单控件的大小 .input-lg .input-sm
<input type="text" class="from-control">
2.按钮
需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WJO8gULt-1626358886734)(C:\Users\one\AppData\Roaming\Typora\typora-user-images\image-20210715215846004.png)]
弹出一个窗口
<button class="btn" onclick="alert('hello word!')" type="button">注册</button>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w1eQ80GQ-1626358886737)(C:\Users\one\AppData\Roaming\Typora\typora-user-images\image-20210715220459808.png)]
ook like a link while maintaining button behavior -->
（链接）Link
[外链图片转存中...(img-WJO8gULt-1626358886734)]
弹出一个窗口
注册
[外链图片转存中...(img-w1eQ80GQ-1626358886737)]
标签：bootstarp,img,...,column,md,col,外链 来源： https://blog.csdn.net/weixin_54374970/article/details/118770415