文档章节

3.1、Bootstrap V4自学之路------内容---重启和版面设计

Asktao
 Asktao
发布于 2016/03/21 21:14
字数 1707
阅读 136
收藏 4

重启部分,略。(个人理解是阐述它的基准,弱需要深入了解,包括修改bootstrap可以再去了解)


1、 全局设置

PS:设计了全局显示的一些样式,body、html、link:hover、font等。


2、标题

<h1>~<h6>显示大号加粗文字,一般用于标题显示,也可以使用 .h1~.h6匹配实现。

没什么不好理解的直接上图。

自定义布局

显示次标题,在主标题<h*>中,使用<small>标签,属性类属性为 .text-muted

muted 英文意思是:减弱的,变得轻柔的; (尤指感情的表达)缓和的,温和的;


<h3 style="color: #006699">这里是H3显示标题
    <small class="text-muted"> small标签 class="text-muted" 的属性。显示次标题</small>
</h3>

PS:<h3>设置颜色,但并不能使次标题变色。是我想多了吗...lol


显示标题

一种更大型、鲜明的标题样式。使用样式为:.display-1 ~~ .display-4

Lead类

    添加.lead类使一个段落醒目。从效果上看,只是加粗了而已。仔细一看,一般字体大小是1rem,而Lead类的字体打下是1.25rem。比之前大了1/4。

使用方式:

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>
<p>
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

内联文本元素

<p>使用mark标签 会使标签内的颜色发生变化,甚至 <mark>此处高亮</mark> p,mark{background-color:#5cb85c}</p>
<p><del>《del》这一行的文本将被视为已删除的文本。</del></p>
<p><s>《s》这一行的文本是为了被视为不再准确。从效果上看,与上面《del》标签类似</s></p>
<p><ins>《ins》这一行的文本将被视为一个附加的文档。</ins></p>
<p><u>《u》这行将以下划线方式显示</u></p>
<p><small>《small》这行文字是当作小字</small></p>
<p><strong>《strong》这行文字将以字体加粗显示</strong></p>
<p><b>《b》这行文字将以字体加粗显示</b></p>
<p><em>《em》这行将以斜体文本显示。</em></p>
<p><i>《i》这行将以斜体文本显示。</i></p>

PS:为什么粗体有<b><strong>,斜体有<em><i>,下划线有<ins><u>,删除线<del><s>各有不同呢?

    我的理解是外国人的习惯导致的,喜欢分类。比如打电话用手机,听音乐用ipod,玩游戏用ipad。

    文章也介绍了,<del>是删除,<s>是原本是真的,但是现在删掉了。<em>是斜体<i>是语音和技术术语等。


缩略语

使用<addr>标签,使标签内的文字在鼠标悬停时提供额外的上线文提醒或说明。

向<addr>标签内使用 .initialism 类,实现略小的字号。

<p>参考文本<abbr title="attribute">测试文本</abbr></p>
<p>参考文本<abbr title="HyperText Markup Language" class="initialism">参考文本</abbr></p>

截图的原因无法触发效果,但效果真的是悬空时有提示框。

initialism
英[ɪ'nɪʃəlɪzəm]美[ɪ'nɪʃəˌlɪzəm]
n.:词首字母缩略词
网络:缩写; 首字母缩略语; 首字母缩写词

引用块

为了在你的文档中引用来自别处的文本内容,请在一段HTML外面包裹<blockquote>作为引用。

为了显示直接引用,我们推荐使用<p>

<p>我就是用来测试和下面有什么不同的</p>
<blockquote>
  <p>我想到了,这么多类似功能的标签,如果做到好了,可以优化索引,SEO的是吧</p>
</blockquote>


命名来源

一种显示的方式,用来引用某个文章的一段话,及其出处。

使用<blockquote>标签包裹,<P>标签显示引用文字,<footer>标示引用说明,<cite>指她的出处。

<p>我和上文对比一下效果就出来了,下面的《blockquote》标签加入了类.blockquote属性。</p>
<blockquote  class="blockquote">
  <p>这里是纯《P》标签,外层是《blockquote》标签,配置class="blockquote" 类</p>
  <footer>正行是《footer》标签,<cite title="Source Title">这里是《cite》标签,配上title属性,悬空会有文字提醒</cite></footer>
</blockquote>

从效果上看,<blockquote>标签加入了.blockquote之后,效果还是令人满意的。

逆向布局

确切的说,应该是引用块<blockquote>标签的向右对齐。

使用方式:在<blockquote>标签中引入一个 .blockquote-reverse类。

<p>我和上文对比一下效果就出来了,下面的《blockquote》标签加入了类.blockquote,再加.bolckquote-reverse类。</p>
<blockquote class="blockquote blockquote-reverse">
  <p>这里是纯《P》标签,外层是《blockquote》标签,配置class="blockquote blockquote-reverse" 类</p>
  <footer>正行是《footer》标签,<cite title="Source Title">这里是《cite》标签,配上title属性,悬空会有文字提醒</cite></footer>
</blockquote>

PS:这里要说明的是,我一开始仅引入了.blockquote-reverse,没有引入.blockquote。效果只有右对齐,有字体大小粗线都没有显示。说出来mark注明一下。


3、列表

无序列表

在<ul>标签中使用.list-unstyled类。取消其默认样式。

<ul class="list-unstyled">
  <li>第一层《ul》引用.list-unstyled类。</li>
    <ul>
      <li>在其中一个《li》标签在嵌套一个《ul》但没有引用.list-unstyled类。</li>
      <li>因为是嵌套的《ul》标签的第二层,所以左边样式的空心的黑点</li>
    </ul>
  </li>
  <li>第一层第三个《li》样式和第一行一样,没有默认样式的黑点。</li>
</ul>

内联列表

在<ul>标签中使用.list-inline类,将<li>显示在一行内。

<ul class="list-inline">
  <li>第一个《li》,使用.list-inline类。</li>
  <li>第二个《li》</li>
  <li>第三个《li》,你发现《ul》的《li》都在一行了吗?</li>
</ul>


水平描述

汉字不同呀,意思是比如使用一个固定宽度的<span><div>,或者例子上说的<dl>宽度是固定的。

但文字内容太长,如果全部显示则会搞乱布局。对应这个情况,使用 .text-truncate类。

效果是将超出区域宽度的文字用省略号(...)截团文字。

<dl class=""><!--  class="dl-horizontal" -->
  <dt class="col-sm-3">dt class="col-sm-3"</dt>
  <dd class="col-sm-9">dd class="col-sm-9"</dd>

  <dt class="col-sm-3">dt class="col-sm-3"</dt>
  <dd class="col-sm-9">dd class="col-sm-9</dd>
  <dd class="col-sm-9 col-sm-offset-3">dd class="col-sm-9 col-sm-offset-3"</dd>

  <dt class="col-sm-3">dt class="col-sm-3"</dt>
  <dd class="col-sm-9">dd class="col-sm-9"</dd>

  <dt class="col-sm-3 text-truncate">dt class="col-sm-3 text-truncate"</dt>
  <dd class="col-sm-9">dd class="col-sm-9"</dd>
</dl>

PS:这里的<dl>标签明没有使用 .dl-horizontal类。

不知道为什么,使用了这个类之后,<dt>标签的前3个字符看不到了。

PS:这一点有验证了一下。包含在class="col-sm-12"中正常。

使用.dl-horizontal类与否的效果是,类似*-fluid的效果。两侧取消padding,撑满框中所有内容。

© 著作权归作者所有

Asktao
粉丝 27
博文 100
码字总数 116095
作品 0
丰台
程序员
私信 提问
Bootstrap V4 自学之路 文档目录

PS:将文档中的内容亲手梳理一遍,用自己的话重复一些遍。其中意义与COPY不同。是胜于蓝。 对自己的话! 课程目录 1、Bootstrap V4 自学之路------起步 1.1、Bootstrap V4自学之路------起步...

Asktao
2016/01/25
445
0
6.1、Bootstrap V4自学之路------迁移---升级到v4

升级到 v4 Bootstrap 4 几乎是对整个项目进行了重写。其中最显著的变化都概括到了下面的内容,与以前相比,拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。 当心!它在 flux 中...

Asktao
2016/03/26
335
0
Bootstrap V4 自学开始!

记在前面!!! 记在前面!!! 记在前面!!! 目标:克服一切困难学习Bootstrap V4文档所有知识,并做出相应效果实例。 结束日期:2016年3月25日 学习地址:http://wiki.jikexueyuan.com/project/b...

Asktao
2016/01/25
159
1
1.1、Bootstrap V4自学之路------起步---介绍

如果快速建立bootstrap V4模板 DEMO敬上: <!DOCTYPE html><html lang="en"> <head> <!-- Required meta tags always come first --> <meta charset="utf-8"> <meta name="viewport" conten......

Asktao
2016/01/25
181
0
5.1、Bootstrap V4自学之路------关于---品牌指南

标志和标识 使用 Bootstrap 标记(大写的 B )或标准标识(Bootstrap)。应该出现 Helvetica Neue 加粗字体。不要用 Twitter bird 和 Bootstrap。颜色编码:#563d7c 下载标志 下载三种风格之...

Asktao
2016/03/25
133
2

没有更多内容

加载失败,请刷新页面

加载更多

Vue warn]: Computed property "activeNames" was assigned to but it has no setter.

在使用 vue,element-ui时,如下代码 <template> <el-form :model="numberValidateForm" ref="numberValidateForm"> <el-form-item> <el-tabs v-model="activeNames" @tab-cl......

牧云橙
11分钟前
2
0
重构-改善既有代码的设计-6.2内联函数

6.2内联函数 动机 本书经常以简短的函数表现动作意图,这样会使代码更清晰易读。但有时候你会遇到某些函数,其内部代码和函数名称同样清晰易读。也可能你充够了该函数的内部实现,使其内容和...

还仙
12分钟前
2
0
Less 混入

混合类似于编程语言中的函数。 Mixins 是一组CSS属性,允许我们将一个类的属性嵌套于另一个类,被嵌入的类可以看作是变量,并且包含类名作为其属性,也就是说我们可以用一个类定义样式然后把...

凌兮洛
14分钟前
2
0
频繁FGC的真凶原来是它

频繁FGC的真凶原来是它 上周排查了一个线上问题,主要现象是CPU占用过高,jvm old区占用过高,同时频繁fgc,我简单排查了下就草草收场了,但是过后我对这个问题又进行了复查,发现问题没有那...

每天晒白牙
15分钟前
3
0
简单的树形菜单如何写

业务需求 数据结构中含有图片、名称、children的树形结构,需要展示出每一级的图片名称和图片,找了些树形图的插件,都没有展示大的图片的,一般都是小图标,就自己试着写一个包含图的简单的...

tianyawhl
17分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部