文档章节

4.8、Bootstrap V4自学之路------组件---标签

Asktao
 Asktao
发布于 2016/03/24 11:14
字数 367
阅读 43
收藏 0

示例

<h1>h1 span class="label-default"> <span class="label-default">New</span></h1>
<h1>h1 span class="label label-default"> <span class="label label-default">New</span></h1>
<h2>h2 span class="label label-default"> <span class="label label-default">New</span></h2>
<h3>h3 span class="label label-default"> <span class="label label-default">New</span></h3>
<h4>h4 span class="label label-default"> <span class="label label-default">New</span></h4>
<h5>h5 span class="label label-default"> <span class="label label-default">New</span></h5>
<h6>h6 span class="label label-default"> <span class="label label-default">New</span></h6>

PS:看了半天,原来是最后面的那个New,享受  .label 和 .label-default类。

上下文的变化

添加下面提到的修饰类的任一个,以改变标签的外观。

<span class="label-default">class="label-default"</span>    <br>
<span class="label label-default">class="label label-default"</span>    <br>
<span class="label label-primary">class="label label-primary"</span>    <br>
<span class="label label-success">class="label label-success"</span>    <br>
<span class="label label-info">class="label label-info"</span>  <br>
<span class="label label-warning">class="label label-warning"</span>    <br>
<span class="label label-danger">class="label label-danger"</span>

丸状标签

使用.label-pill修饰类以使标签变得更圆(更大的border-radius以及额外的横向padding)。如果你想念v3的badges,它很有用。

<span class="label-default label-pill">class="label-default label-pill"</span>    <br>
<span class="label label-pill label-default">class="label label-pill label-default "</span>    <br>
<span class="label label-pill label-primary">class="label label-pill label-primary"</span>    <br>
<span class="label label-pill label-success">class="label label-pill label-success"</span>    <br>
<span class="label label-pill label-info">class="label label-pill label-info"</span>  <br>
<span class="label label-pill label-warning">class="label label-pill label-warning"</span>    <br>
<span class="label label-pill label-danger">class="label label-pill label-danger"</span>

PS:作为一个一种提示存在,感觉非常便利。






© 著作权归作者所有

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

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

Asktao
2016/01/25
421
0
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
169
0
6.1、Bootstrap V4自学之路------迁移---升级到v4

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

Asktao
2016/03/26
324
0
4.4、Bootstrap V4自学之路------组件---表单

表单控件 下面是一个Bootstrap支持的表控件以及自定义类的完整列表。额外的文档对每个组都是可用的。 类 作用 支持的变量 表单控件的任一组 用在任何块级元素上,比如说或 文本域控件 、 、、...

Asktao
2016/03/23
426
0
Bootstrap V4 自学开始!

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

Asktao
2016/01/25
155
1

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.4K
15
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
41
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部