Bootstrap每天必学之标签与徽章
1、标签在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,比如说在导航上添加了一个新导航项,可能就会加一个“new”标签,来告诉用户。这是新添加的导航项。如下图所示: 那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件,并且以“.label”样式来实现高亮显示。 既然他是一个独立的组件,当然在不同的版本下有不同的文件: ☑ LESS版本:对应的源文件label.less ☑ Sass版本:对应的源文件_label.scss ☑ 编译后版本:bootstrap.css文件第4261行~第4327行 1)、使用原理: 使用方法很简单,你可以在使用span这样的行内标签: 代码如下: Example heading
运行效果: 2)、实现原理: /bootstrap.css文件第4261行~第4272行/ 如果使用的是a标签元素来制作的话,为了让其更美观,在hover状态去掉下划线之类: /bootstrap.css文件第4273行~4278行/ 有的时候标签内没有内容的时候,可以借助CSS3的:empty伪元素将其隐藏: 3)、颜色样式设置:和按钮元素button类似,label样式也提供了多种颜色: ☑ label-deafult:默认标签,深灰色 ☑ label-primary:主要标签,深蓝色 ☑ label-success:成功标签,绿色 ☑ label-info:信息标签,浅蓝色 ☑ label-warning:警告标签,橙色 ☑ label-danger:错误标签,红色 主要是通过这几个类名来修改背景颜色和文本颜色: 运行效果: 4、颜色实现原理: /bootstrap.css文件第4286行~第4237行/ 2、徽章从某种意义上来说,徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用。常出现的是一些系统发出的信息,比如你登录你的twitter后,如果你信息没有看,系统会告诉你有多少信息未读,如下图所示:
对应的文件版本: ☑ LESS版本:源文件badges.less ☑ Sass版本:源文件_badges.scss ☑ 编译后版本:bootstrap.css文件第4328行~第4366行 使用方法: 使用方法,其实也没什么太多可说的,你可以像标签一样,使用span标签来制作,然后为他加入badge类: 运行效果: 1)、实现原理: 主要将其设置为椭圆形,并且加了一个背景色: /bootstrap.css文件第4328行~第4341行/ 同样也使用`:empty`伪元素,当没有内容的时候隐藏: 正如开头所说,可以将徽章与按钮或者导航之类配合使用: 运行效果 2)、按钮和胶囊形导航设置徽章: 另外,徽章在按钮元素button和胶囊形导航nav-pills也可以有类似的样式,只不过是颜色不同而以: 运行效果: 样式代码请查看bootstrap.css文件第4345行~第4366行。 注意:不过和标签组件不一样的是:在徽章组件中没有提供多种颜色风格的效果,不过你也可以通过badges.less或者_badges.scss快速自定义。此处对不做过多阐述。 通过上文的介绍大家对标签和徽章是不是有了大概的了解,希望大家把标签和徽章应用到自己的网站中,真正的做到学以致用。 如果大家还想深入学习,可以点击进行学习,再为大家附两个精彩的专题: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- 上传适配器未定义使用ckeditor5-angular上传图片的问题
- shell expect的简单用法
- scala – “Overriding”继承了方差
- scala – 如何在play 2.0模板中格式化数字/日期?
- 【HDU 3328】【数据结构】Flipper
- 在AngularJS中使用’scope’从另一个控制器调用控制器的方法
- ‘MouseEvent’类型中不存在属性’coords’.在Angular2-goo
- 19.2.13 [LeetCode 71] Simplify Path
- macos – 在执行具有管理员权限的shell命令时,Applescript应
- angularjs – NodeJS / Express4端点生成损坏的xlsx文件