栅格系统

一.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 的栅格系统是如何在多种屏幕设备上工作的。

四.实例：从堆叠到水平排列

使用单一的一组 .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>

状态类

通过这些状态类可以为行或单元格设置颜色。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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)]