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 ...
随机推荐
- 跟我学算法-吴恩达老师(超参数调试, batch归一化, softmax使用,tensorflow框架举例)
1. 在我们学习中,调试超参数是非常重要的. 超参数的调试可以是a学习率,(β1和β2,ε)在Adam梯度下降中使用, layers层数, hidden units 隐藏层的数目, learning_ ...
- 【转】TCP、UDP数据包大小的限制
来自:https://blog.csdn.net/caoshangpa/article/details/51530685 1.概述 首先要看TCP/IP协议,涉及到四层:链路层,网络层,传输层,应用层 ...
- MySQL 触发器示例
简介: MySQL 触发器 这次实验是在一台 MySQL Slave 上进行的,事实证明:从库添加数据库.表.插入.删除数据等,不会导致主从失败. 一.创建实验数据库.表 mysql > cre ...
- Python divmod() 函数
Python divmod() 函数 Python 内置函数 python divmod() 函数把除数和余数运算结果结合起来,返回一个包含商和余数的元组(a // b, a % b). 在 pyt ...
- sql添加/移除约束
唯一:ALTER TABLE TableName ADD CONSTRAINT UQ_NickName UNIQUE(NickName) 主键:ALTER TABLE TableName ADD CO ...
- 初识STM32标准库
1.CMSIS 标准及库层次关系 CMSIS 标准中最主要的为 CMSIS 核心层,它包括了: STM32标准库可以从官网获得: 在使用库开发时,我们需要把 libraries 目录下的库函数文件添加 ...
- Java字符串split分割星号*等特殊字符问题(转)
Java的split()方法分割字符串比较常用(见[Java]字符串以某特殊字符分割处理 ),但在有的时候,会遇到星号*等正则表达式中的特殊字符而无法分割的问题. 比如某需求,用户输入产品规格:厚*宽 ...
- (巴什博弈 sg函数入门1) Brave Game -- hdu -- 1846
链接: http://acm.hdu.edu.cn/showproblem.php?pid=1846 首先来玩个游戏,引用杭电课件上的: (1) 玩家:2人:(2) 道具:23张扑克牌:(3) 规则: ...
- idea jvm 优化
修改对应配置文件 64位的是idea64.exe.vmoptions -Xms2048m -Xmx2048m -Xmn1024m -XX:PermSize=512m -XX:MaxPermSize=5 ...
- mysql下的常见问题处理
1. ubuntu中启动mysql,提示mysql access denied for user root@localhost 错误. 是因为还没有给添加的root账户配置密码信息. (1)停止mys ...