2018年12月7日
#Boostrap#
boostrap是一个功能比较完善的外部样式文件,我们可以把设置好的属性直接添加到我们的html文件中的标签上。
##栅格系统##
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局
<b>简介<b>
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理:
不懂就没写了
#排版#
标题:
b1-b6(标题内可以赋予其他标签。)
<b1>这里是一个一级标题<b1>
页面主体:
Bootstrap 将全局 font-size 设置为 14px,line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外,<p> (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。
在引用bootstrap时这些属性会被直接引用。
中心内容:
lead类可以让段落突出显示。
删除:
del 删除文本时使用的标签。
无用文本:
s对于没用的文本使用 。 表面效果类似del。
插入文本:
ins额外插入的文本使用。
下划线:
u为文本添加下划线。
对齐:
左对齐:class="text-left"
中心对齐:class="text-center"
右对齐:class="text-right"
自动调整:class="text-justify"
无还行文本:class="text-nowrap"
大小写:
大写class="text-lowercase"
小写class="text-uppercase"
首字母大写class="text-capitalize"
缩略语:
abbr当鼠标悬停在缩写和缩写词上时就会显示完整内容。
首字母缩略语:
为缩略语添加 .initialism 类,可以让 font-size 变得稍微小些。
<b>引用<b>
将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。
对于直接引用,我们建议用 <p> 标签。
对于标准样式的 <blockquote>,可以通过几个简单的变体就能改变风格和内容。
添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。
##列表##
有序列表:ul
无序列表:ol
无样式列表:class="list-unstyle"
内联列表:
class="list-inline"通过设置 display: inline-block; 并添加少量的内补(padding),将所有元素放置于同一行。其他带有描述的短语列表。
水平排列的描述:
.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起,随着导航条逐渐展开而排列在一行。
##代码##
内联代码:
通过 <code> 标签包裹内联样式的代码片段。
用户输入:
通过 <kbd> 标签标记用户通过键盘输入的内容。
代码块:
多行代码可以使用 <pre> 标签。为了正确的展示代码,注意将尖括号做转义处理。
变量:通过 <var> 标签标记变量。
程序输出:
通过 <samp> 标签来标记程序输出的内容。
##表格##
基础表格:table
条纹装表格:
通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。
带边框的表格:
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
鼠标悬停:
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
紧缩表格:
通过添加 .table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半。