时间:2021-07-01 10:21:17 帮助过:15人阅读
在Bootstrap中使用标题的方式和常规html一样:从
字体颜色与字体样式继承自父元素,字体粗细为500,且行高全部设为1.1(也就是font-size的1.1倍)
{ font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit;}
在不同大小的标题中有着如下区别:
除此之外在Bootstrap中为了 让非标题元素和标题使用相同的样式 ,还特意定义了 .h1~.h6 六个类名。如下所示:
在Bootstrap中,下面的代码,显示效果相同。
Bootstrap标题一
Bootstrap标题二
Bootstrap标题三
Bootstrap标题四
Bootstrap标题五
Bootstrap标题六
Bootstrap标题一Bootstrap标题二Bootstrap标题三Bootstrap标题四Bootstrap标题五Bootstrap标题六
因为在实际应用中,我们可能经常会遇到除了主标题外,之后紧跟着一个副标题的情况。Bootstrap人性化的为我们设置了这样一个效果。使用方式也特别简单,如下:
Bootstrap标题一我是副标题
当然毋庸置疑的是,从
Bootstrap中的文本全局样式如下:
当然,你是可以自行设置重置样式的。^_^
lead
ismallstrongem
在Bootstrap中定义了一系列的这样的类,用于不同的情景,出去text外,还有bg(背景颜色)等等。使用方法类似,只是前面的文本进行了一些改变!所以。 记住这6个单词吧
提示,使用浅灰色(#999)
主要,使用蓝色(#428bca)
成功,使用浅绿色(#3c763d)
通知信息,使用浅蓝色(#31708f)
警告,使用黄色(#8a6d3b)
危险,使用褐色(#a94442)
我居左
我居中
我居右
我两端对齐
在Bootstrap中,为了简化操作,方便使用,使用了上面这四个类分别对应我们在CSS中常常使用 text-align 来实现文本的对齐风格的设置。
在Bootstrap中对于列表的设置与原生的html基本一致,需要注意的有:
Bootstrap当然不会就这么简单做一点点修改,它定义了一些关于列表的类给我们使用。
.list-unstyled { padding-left: 0; list-style: none;}
从源码中,我们可以看到这样的信息,它除了将项目编号去除之外,还将默认的左边距也清除掉了。
- 项目列表
- 带有项目编号
- 带有项目编号
在这样一段代码中,三个列表项会整齐的 排列在一起 ,且都没有 项目符号
除了去点列表之外,Bootstrap还可以通过添加类名“.list-inline”来实现内联列表,简单点说就是 把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。 也可以说内联列表就是为制作水平导航而生。
现有代码如下:
在浏览器全屏显示中可以看到效果如下:
我们来把屏幕大小进行改变,在遇到一个临界值时(小屏),水平定义列表将回复到原始的状态,如下改变:
这是为什么呢?我们去看看源码吧!
原来在这里添加了一个媒体查询,只有 屏幕大于768px 的时候,添加类名 .dl-horizontal 才具有水平定义列表效果。其实现主要方式:
现在再看看上面的效果是不是和这里的描述都是一样的呢?答案当然是肯定的 ^ ^
在Bootstrap主要提供了三种代码风格:
来显示单行内联代码——针对于 单个单词或单个句子 的代码 直接来看效果吧!
代码如下:(需要注意的是,**不管使用哪种代码风格,在代码中碰到小于号( < )和大于号( > )都需要使用转义字符来替代)
code风格:Bootstrap的代码风格有三种:pre风格:
、
和
kbd风格:
- ...
请输入ctrl+c来,然后使用ctrl+v来粘贴代码
元素一般用于显示大块的代码,并保证原有格式不变。但有时候代码太多,而且不想让其占有太大的页面篇幅,就想控制代码块的大小。Bootstrap也考虑到这一点,你只需要在 pre标签 上添加类名 .pre-scrollable ,就可以控制代码块区域 最大高度为340px ,一旦超出这个高度,就会在 Y轴(纵向)出现滚动条。当然,你也可以进行自定义配置,例如:只需要在自定义的css中,对于该类添加一个 word-wrap: normal; ,这样的话,在代码块边框横向宽度小于内部代码横向长度时,就会出现横向滚动条。
7. 表格
表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了 1种基础样式 和 4种附加样式 以及 1个支持响应式的表格 。
对应上面所说的,Bootstrap为表格不同的样式风格提供了不同的类名,主要包括:
.table | 基础表格 |
---|---|
.table-striped | 斑马线表格 |
.table-bordered | 带边框的表格 |
.table-hover | 鼠标悬停高亮的表格 |
.table-condensed | 紧凑型表格 |
.table-responsive | 响应式表格 |
.table 主要有三个作用:
具体大家可以在源码中查看,后几种附加的样式在这里也不多说,但是下面说一些 注意事项: