Bootstrap源码解读排版(1)

网友投稿 204 2023-06-23


Bootstrap源码解读排版(1)

源码解读Bootstrap排版

粗体

可以使用和标签让文本直接加粗。

例如:

我在学习Bootstrap

源码

b,

strong {

font-weight: bold;

}

斜体

使用标签来实现。

例如:

我在学Bootstrap

强调相关的类

强调类都是通过颜色来表示强调

.text-muted:提示,使用浅灰色(#777)

.text-primary:主要,使用蓝色(#428bca)

.text-success:成功,使用浅绿色(#3c763d)

.text-info:通知信息,使用浅蓝色(#31708f)

.text-warning:警告,使用黄色(#8a6d3b)

.text-danger:危险,使用褐色(#a94442)

例如:

源码

.text-muted {

color: #777;

}

.text-primary {

color: #428bca;

}

a.text-primary:hover {

color: #3071a9;

}

.text-success {

color: #3c763d;

}

a.text-success:hover {

color: #2b542c;

}

.text-info {

color: #31708f;

}

a.text-info:hover {

color: #245269;

}

.text-warning {

color: #8a6d3b;

}

a.text-warning:hover {

color: #66512c;

}

.text-danger {

color: #a94442;

}

a.text-danger:hover {

color: #843534;

}

文本对齐风格

.text-left:左对齐

.text-center:居中对齐

.text-right:右对齐

.text-justify:两端对齐

例如:

我居左

源码:

.text-left {

text-align: left;

}

.text-right {

text-align: right;

}

.text-center {

text-align: center;

}

.text-justify {

text-align: justify;

}

目前两端对齐在各浏览器下解析各有不同,特别是应用于中文文本的时候。所以项目中慎用。

列表

Bootstrap对于列表,只是在margin上做了一些调整

源码:

ul,

ol {

margin-top: 0;

margin-bottom: 10px;

}

ul ul,

ol ul,

ul ol,

ol ol {

margin-bottom: 0;

}

去点列表

给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。

例如:

源码:

.list-unstyled {

padding-left: 0;

list-style: none;

}

内联列表

通过添加类名“.list-inline”来实现内联列表,其实就是把垂直列表换成水平列表,而且去掉项目符号,保持水平显示。可以用来做水平导航。

源码:

.list-inline {

padding-left: 0;

margin-left: -5px;

list-style: none;

}

.list-inline > li {

display: inline-block;

padding-right: 5px;

padding-left: 5px;

}

定义列表

Bootstrap只是调整了行间距,外边距和字体加粗效果

源码:

dl {

margin-top: 0;

margin-bottom: 20px;

}

dt,

dd {

line-height: 1.42857143;

}

dt {

font-weight: bold;

}

dd {

margin-left: 0;

}

水平定义列表

水平定义列表就像内联列表一样,添加类名“.dl-horizontal”给定义列表实现水平显示效果。

源码:

@media (min-width: 768px) {

.dl-horizontal dt {

float: left;

width: 160px;

overflow: hidden;

clear: left;

text-align: right;

text-overflow: ellipsis;

white-space: nowrap;

}

.dl-horizontal dd {

margin-left: 180px;

}

}

此处添加了一个媒体查询。也就是说,只有屏幕大于768px的时候,添加类名“.dl-horizontal”才具有水平定义列表效果。当缩小浏览器屏幕时,水平定义列表将回复到原始的状态。

代码

主要提供了三种代码风格:

显示单行内联代码,一般是针对于单个单词或单个句子的代码

来显示用户输入代码,一般是表示用户要通过键盘输入的内容

在pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。

源码:

.pre-scrollable {

max-height: 340px;

overflow-y: scroll;

}

表格

Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。

.table:基础表格

.table-striped:斑马线表格

.table-bordered:带边框的表格

.table-hover:鼠标悬停高亮的表格

.table-condensed:紧凑型表格

.table-responsive:响应式表格

例如要使用斑马线表格并且鼠标悬停高亮:

响应式表格的用法和其他几个不同。

Bootstrap提供了一个容器,并且此容器设置类名“.table-responsive”,此容器就具有响应式效果,然后将

Bootstrap中响应式表格效果表现为:当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失。示例如下:

表格行的类

tr有五种不同的类名,可以显示行的不同的颜色

.active 表示当前活动的信息

.success 表示成功或者正确的行为

.info 表示中立的信息或HaGMbUQv行为

.warning 表示警告,需要特别注意

.danger 表示危险或者可能是错误的行为

例如:

本文系列教程整理到:Bootstrap基础教程 专题中,欢迎点击学习。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Bootstrap select多选下拉框实现代码
下一篇:Bootstrap CSS使用方法
相关文章

 发表评论

暂时没有评论,来抢沙发吧~