Bootstrap源码解读排版(1)

前端之家收集整理的这篇文章主要介绍了Bootstrap源码解读排版(1)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

源码解读Bootstrap排版

粗体

可以使用

标签让文本直接加粗。 例如:

我在学习

Bootstrap

源码

斜体

使用标签来实现。 例如:

我在学Bootstrap

强调相关的类

强调类都是通过颜色来表示强调 .text-muted:提示,使用浅灰色(#777) .text-primary:主要,使用蓝色(#428bca) .text-success:成功,使用浅绿色(#3c763d) .text-info:通知信息,使用浅蓝色(#31708f) .text-warning:警告,使用黄色(#8a6d3b) .text-danger:危险,使用褐色(#a94442) 例如:

效果

源码

文本对齐风格

.text-left:左对齐 .text-center:居中对齐 .text-right:右对齐 .text-justify:两端对齐 例如:

源码:

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

列表

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

去点列表

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

不带项目编号
  • 不带项目编号
  • 源码:

    内联列表

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

    li { display: inline-block; padding-right: 5px; padding-left: 5px; }

    定义列表

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

    水平定义列表

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

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

    代码

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

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

    显示多行块代码,一般是针对于多行代码(也就是成块的代码

    显示用户输入代码,一般是表示用户要通过键盘输入的内容 在pre标签添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。 源码:

    表格

    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 表示中立的信息或行为 .warning 表示警告,需要特别注意 .danger 表示危险或者可能是错误的行为 例如:

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

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    猜你在找的Bootstrap相关文章