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 ...
随机推荐
- linux Crontab 使用
cron 用法说明 全文如下: cron来源于希腊单词chronos(意为“时间”),是linux系统下一个自动执行指定任务的程序.例如,你想在每晚睡觉期间创建某些文件或文件夹的备份,就可以用cron ...
- EL 和 JSTL
EL 什么是EL表达式 EL(Express Lanuage) 表达式可以嵌入在jsp页面内部 减少jsp脚本的编写 EL出现的目的是要替代jsp页面中脚本的编写 作用区间 EL最主要的作用是获取四大 ...
- JSTL的基本使用
<body> <% request.setAttribute("name", "lisi123"); request.setAttribute ...
- 24.Swap Nodes in Pairs (List; Two-Pointers)
Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...
- jsp滚动框(非滚动条)
<marquee scrollAmount=4 width=300>需要滚动的字</marquee> scrollAmount表示运动速度,值是正整数,默认为6,越大滚动越快 ...
- 接雨水12 · Trapping Rain Water12
[抄题]: Given n non-negative integers representing an elevation map where the width of each bar is 1, ...
- 1-vim的复制粘贴
一. http://blog.csdn.net/hk2291976/article/details/42196559 二. "+y"+p---------------------- ...
- Qt Font
Font and How to use TTF字体基本知识及其在QT中的应用 Qt为程序添加外部字体 在使用qt 添加第三方字体的时候,在程序开始的时候,使用·QFontDatabse·的静态函数加载 ...
- MongoDB增加用户认证: 增加用户、删除用户、修改用户密码、读写权限、只读权限
1.添加并验证用户 > use admin> db.addUser("zjx","tsjianxin") #添加用户 > db.auth(&q ...
- Python爬虫进阶一之爬虫框架概述
综述 爬虫入门之后,我们有两条路可以走. 一个是继续深入学习,以及关于设计模式的一些知识,强化Python相关知识,自己动手造轮子,继续为自己的爬虫增加分布式,多线程等功能扩展.另一条路便是学习一些优 ...