Bootstrap框架常用总结
Bootstrap框架常用标签:
标题标签:<h1>-<h6>
bootstrap中也设置的相同的样式 - 若要使用 必须使用空标签来定义 比如<span class="h1"></span>
文本排版 : <p>
bootstrap中对于文本的排版重新做了优化和定义。。
<mark>咕咕咕</mark> 用这个标签修饰 “咕咕咕” 这个文字会稍微有些字体背景变黄。
<del> 咕咕咕<del> 用这个标签修饰 “咕咕咕” 这个文字以删除线的方式显示。
<ins>咕咕咕</ins> <u>咕咕咕</u> 这个标签修饰会显示文字下划线
<small>咕咕咕</small> 使文字变小
bootstrap中对文本进行对齐:
<p class="text-left">咕咕咕</p> 文本向左对齐
<p class="text-center">咕咕咕</p> 文本居中对齐
<p class="text-right">咕咕咕</p> 文本向右对齐
bootstrap对字母进行大小写规范:
<p class="text-lowercase"> 所有字母全部小写
<p class="text-uppercase">所有字母小写
<p class="text-capitalize"> 首字母大写
<footer class="blockquote-footer">From WWF's website</footer>文字变小并且颜色浅
<kbd>ctrl + p</kbd> 变成黑色
<code>文字变红</code>,
| .font-weight-bold | 加粗文本 | 尝试一下 |
| .font-weight-normal | 普通文本 | 尝试一下 |
| .font-weight-light | 更细的文本 | 尝试一下 |
| .font-italic | 斜体文本 | 尝试一下 |
| .lead | 让段落更突出 | 尝试一下 |
| .small | 指定更小文本 (为父元素的 85% ) | 尝试一下 |
| .text-left | 左对齐 | 尝试一下 |
| .text-center | 居中 | 尝试一下 |
| .text-right | 右对齐 | 尝试一下 |
| .text-justify | 设定文本对齐,段落中超出屏幕部分文字自动换行 | 尝试一下 |
| .text-nowrap | 段落中超出屏幕部分不换行 | 尝试一下 |
| .text-lowercase | 设定文本小写 | 尝试一下 |
| .text-uppercase | 设定文本大写 | 尝试一下 |
| .text-capitalize | 设定单词首字母大写 | 尝试一下 |
| .initialism | 显示在 <abbr> 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母 | 尝试一下 |
| .list-unstyled | 移除默认的列表样式,列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式) | 尝试一下 |
| .list-inline | 将所有列表项放置同一行 | 尝试一下 |
| .pre-scrollable | 使 <pre> 元素可滚动,代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条 |
表格样式修改 <table class="样式"> <tr class="danger"> // red warning // yellow info // blue success // green
以下是对table标签的class进行修饰 Bootstrap中的表格:
.table-bordered 带边框
.table-striped 条纹
.table-hover 悬停变色
.table-condensed 紧凑
颜色:
详情请看:http://www.runoob.com/bootstrap4/bootstrap4-colors.html
Bootstrap框架常用总结的更多相关文章
- bootstrap框架:常用内容一
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...
- Bootstrap框架的学习(一)
一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...
- Web前端学习笔记:Bootstrap框架
很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...
- 基于BootStrap框架构建快速响应的GPS部标监控平台
最近一个客户要求将gps部标平台移植到bootStrap框架作为前端框架,符合交通部796部标只是他们的一个基本要求,重点是要和他们的冷链云物流平台进行适配.我自己先浏览了客户的云物流平台的界面,采用 ...
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- Bootstrap框架(基础篇)
本文引用慕课网http://www.imooc.com/learn/141 作者大漠 讲的很详细,我没有全篇都引用,其中很多是添加了自己的一些理解. Bootstrap框架是基于JQuery 所以 ...
- 移动Web学习笔记(第1天)-bootstrap框架的使用
移动web前言 移动web : 移动端手机浏览器或者微信里面浏览的网页 移动APP : 手机上需要下载安装的应用程序 1. 移动web介绍 1.1 3 天 响应式开发 一套代码运行多个终端 优点:开发 ...
- Bootstrap框架的了解和使用之栅格系统
前 言 Bootstrap Bootstrap 包含了一个响应式的.移动设备优先的.不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列.它包含了用于简单的布局选项的预定 ...
- Bootstrap框架 inconfont font-awesome
Bootstrap框架和inconfont.font-awesome使用 iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580.h ...
随机推荐
- jekins测试环境自动化
最近搭建测试环境自动化,之前都是用机器猫.机器猫的流程大概是这样,开发打包上传到svn,给测试一个svn地址,测试到机器猫上传文件,然后再运行启动. 为了减去开发打包这个环节,所以专用jenkins. ...
- leetcode 14 最长公共前缀
描述: 给个字符串vector,求最长公共前缀. 解决: 直接取第一个字符串作为最长公共前缀,将其每个字符遍历过一次.设最长字符实际为k,共n个元素,则复杂度O(nk) string longestC ...
- MVC知识记录
1.完整深入分析 MVC请求机制:http://blog.jobbole.com/85033/ 2.MVC入门:http://www.aizhengli.com/givecase-aspnet-5-m ...
- [SoapUI]怎样获取上一个Test Step的名字
def currentStepInd = context.currentStepIndex def previousStep = testRunner.testCase.getTestStepAt(c ...
- 如何规范移动应用交互设计?UI/UX设计师须知的11个小技巧
以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 十年前,手机的使用只是为了沟通. 而近几年,情况发生了很大变化,我们很难找到不使用手机的人.手机在极 ...
- socket收发消息
.socket通讯类 using System; using System.Collections.Generic; using System.Net; using System.Net.Socket ...
- SOAP与REST比较(转)
出处:http://xiaobaila.blog.163.com/blog/static/189705129201141965434571/ SOAP与REST比较 如今,Web开发者的可选技术相当之 ...
- 使用Intel的FPGA电源设计FPGA 供电的常用反馈电阻阻值
使用Intel的FPGA电源设计FPGA 供电的常用反馈电阻阻值. 当前仅总结使用EN5339芯片的方案 Vout = Ra*0.6/Rb + 0.6 芯片手册推荐Ra取348K,则 3.3V时,取R ...
- weevely入手使用笔记
-前言 weevely是一款使用python编写的webshell工具,集webshell生成和连接于一身,采用c/s模式构建,可以算作是linux下的一款php菜刀替代工具,具有很好的隐蔽性(生成随 ...
- Android-隐式意图激活操作系统通话界面
阅读Android操作系统的 packages/apps/phone/AndroidManifest.xml,是如何暴露的 AndroidManifest.xml Android操作系统在这里明确 ...