其他分享
首页 > 其他分享> > bootstarp

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 (自动)750px970px1170px
类前缀.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