前端组件Bootstrap4(学习笔记二)
来源:互联网 发布:淘宝免费打折软件 编辑:程序博客网 时间:2024/06/07 19:54
昨天简单的学习了一下Bootstrap4的文字排版,相对来说,是比较的简单,基本上就使用对应的class,和Vue.js的用法很是相似,其实本来就是这样,毕竟是人家写好的组件,相应的我们拿来用,肯定要按照人家的指示去运用,今天学个比较好玩的,颜色。
颜色这个东西,可以说是举一反三,因为知道了它,像背景,弹框颜色等等,用起来就超级简单,这里我列举常用的颜色。
text-muted柔和的文本text-primary重要的文本text-success执行成功的文本text-info代表一些提示信息的文本text-warning警告文本text-danger危险操作文本text-secondary副标题text-dark深灰色文字text-light浅灰色文本(白色背景上看不清楚)text-white白色文本(白色背景上看不清楚)
来一起看下具体效果吧:
<div class="container-fluid">
<p class="text-muted">柔和的文本</p>
<p class="text-primary">重要的文本</p>
<p class="text-success">执行成功的文本</p>
<p class="text-info">代表一些提示信息的文本</p>
<p class="text-warning">警告文本</p>
<p class="text-danger">危险操作文本</p>
<p class="text-secondary">副标题</p>
<p class="text-dark">深灰色文字</p>
<p class="text-light">浅灰色文本(白色背景上看不清楚)</p>
<p class="text-white">白色文本(白色背景上看不清楚)</p>
</div>
知道了颜色,相应的背景,也就简单多了,无非就是把text换成bg就ok了,如下:
<div class="container-fluid">
<h2>背景颜色</h2>
<p class="bg-primary text-white">重要的背景颜色。</p>
<p class="bg-success text-white">执行成功背景颜色。</p>
<p class="bg-info text-white">信息提示背景颜色。</p>
<p class="bg-warning text-white">警告背景颜色</p>
<p class="bg-danger text-white">危险背景颜色。</p>
<p class="bg-secondary text-white">副标题背景颜色。</p>
<p class="bg-dark text-white">深灰背景颜色。</p>
<p class="bg-light text-dark">浅灰背景颜色。</p>
</div>
总结:
我们是不是发现了,其实牵扯到颜色的变化,我们只需要记住这几个单词就ok了。
阅读全文
0 0
- 前端组件Bootstrap4(学习笔记二)
- 前端组件Bootstrap4(学习笔记一)
- Bootstrap4(二)
- 前端学习笔记(二)
- 前端学习笔记-HTML(二)
- Bootstrap4(二十)
- Bootstrap4(二十一)
- Bootstrap4(二十二)
- Bootstrap4(二十三)
- Bootstrap4(二十四)
- Bootstrap4(二十五)
- Bootstrap4(二十六)
- Bootstrap4(二十七)
- Bootstrap4(二十八)
- 前端框架angular学习笔记(二)
- Bootstrap4
- SEAM学习笔记(二)-----------Seam组件
- Sencha Touch学习笔记(二)组件
- recyclerView 多条目视图
- joda dateTime简单用法
- 内容禁止复制
- 金融业开源软件研究评测(一)——分布式消息中间件评测模型
- SURF特征点检测与匹配之误匹配点删除
- 前端组件Bootstrap4(学习笔记二)
- maven的groupId和artifactId的区别
- Adnroid文件存储路径getFilesDir()与getExternalFilesDir的区别
- 【基础】C# 中的委托和事件
- C++ virtual 使用
- 格式,变色,适屏
- 唯快不破:TCP/IP详解--TCP连接中TIME_WAIT状态过多
- Git报错Another git process seems to be running in this repository解决方法
- promise与回调的异步编程比较(小demo)