Bootstrap-CSS全样式

1.排版

1.1.页面主体

比普通标签要大些，代码如下：

<h3 class="mark">1.1 段落突出</h3><div class="container"><p>斩尽污秽</p><p class="lead">斩尽污秽</p></div>

标签里加入class样式中的led。

1.2.标题

1.标题大小：<h1-h6>,这就不多说了

2.副标题：<small></small>

1.3.内联文本元素

1.标记:class="mark"：用span标签(上面代码和图片中有效果)

2.线条

分为删除与下划线

1. 4.强调文本

小字体（标准字体的80%）：<small>

文本加粗：<string>

文本倾斜：<em>

1.5.对齐（span标签无效）

居左：class="text-left"

居中：class="text-center

3.居左：class="text-right""

剩下的就不演示了，直接上代码跟演示图

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="js/jquery-3.3.1.js"></script><script type="text/javascript" src="js/bootstrap.js"></script><link rel="stylesheet" type="text/css" href="css/bootstrap.css"/></head><body><!-- 全局CSS样式 --><h2>一、排版</h2><h3 class="mark">1.1 段落突出</h3><div class="container"><p>斩尽污秽</p><p class="lead">斩尽污秽</p></div><h3 class="mark">1.2 标题</h3><h1>斩尽污秽</h1><h1><small>斩尽污秽</small></h1><p class="h3">斩尽污秽</p><h3 class="mark">1.3 内联文本元素</h3><p class="mark h6">斩尽污秽</p><p>线条</p><br><p>删除</p><br><del>斩尽污秽</del><s>斩尽污秽</s><p>下划线</p><br><ins>斩尽污秽</ins><u>斩尽污秽</u><p>强调文本</p><small><p>斩尽污秽</p></small><p><strong>斩尽污秽</strong></p><p><em>斩尽污秽</em></p><h3 class="mark">1.4 对齐</h3><p class="text-left">斩尽污秽</p><p class="text-center">斩尽污秽</p><p class="text-right">斩尽污秽</p><h3 class="mark">1.5 改变大小写</h3><span class="text-uppercase">zasdkasd</span><span class="text-lowercase">assadas</span><span class="text-capitalize">asdksadh</span><h3 class="mark">1.6 略缩语</h3><abbr title="好着呢">asdjas</abbr>ajdasda<h3 class="mark">1.7 地址</h3><address>地址：是个地方</address><address>地址：不是个地方</address><h3 class="mark">1.8 引用</h3><blockquote>斩尽污秽<footer>斩尽污秽</footer></blockquote><h3 class="mark">1.9 列表</h3><ul class="list-unstyled"><li>花间一壶酒</li><li>独酌无相亲</li><li>举杯邀明月，对影成三人</li></ul><ul class="list-inline"><li>月既不解饮</li><li>影徒随我身</li><li>暂伴月将影，行乐须及春</li></ul><h2>二、代码</h2><h3 class="mark">2.1 内联代码</h3>斩尽污秽<code>斩尽污秽</code>斩尽污秽<h3 class="mark">2.2 用户输入</h3><kbd>斩尽污秽</kbd><h3 class="mark">2.3 基本代码块</h3><pre>斩尽污秽斩尽污秽斩尽污秽斩尽污秽斩尽污秽</pre><h3 class="mark">2.4 程序输出</h3><pre class="pre-scrollable">斩尽污秽斩尽污秽斩尽污秽斩尽污秽斩尽污秽</pre><h2>三、表格</h2><h3 class="mark">3.1 基本表格</h3>   <table><thead><th>编号</th><th>姓名</th><th>年龄</th></thead><tbody><tr><td>1</td><td>好家伙</td><td>123</td></tr><tr><td>2</td><td>不是人</td><td>124</td></tr><tr><td>3</td><td>不是你</td><td>154</td></tr></tbody></table><h3 class="mark">3.2 条纹表格</h3><table class="table table-striped"><thead><th>编号</th><th>姓名</th><th>年龄</th></thead><tbody><tr><td>1</td><td>好家伙</td><td>123</td></tr><tr><td>2</td><td>不是人</td><td>124</td></tr><tr><td>3</td><td>不是你</td><td>154</td></tr></tbody></table><h3 class="mark">3.3 边框表格</h3><table class="table table-bordered"><thead><th>编号</th><th>姓名</th><th>年龄</th></thead><tbody><tr><td>1</td><td>好家伙</td><td>123</td></tr><tr><td>2</td><td>不是人</td><td>124</td></tr><tr><td>3</td><td>不是你</td><td>154</td></tr></tbody><h3 class="mark">3.4 鼠标悬停表格</h3><table class="table table-hover"><thead><th>编号</th><th>姓名</th><th>年龄</th></thead><tbody><tr><td>1</td><td>好家伙</td><td>123</td></tr><tr><td>2</td><td>不是人</td><td>124</td></tr><tr><td>3</td><td>不是你</td><td>154</td></tr></tbody><h3 class="mark">3.5 紧缩表格</h3><table class="table table-condensed"><thead><th>编号</th><th>姓名</th><th>年龄</th></thead><tbody><tr><td>1</td><td>好家伙</td><td>123</td></tr><tr><td>2</td><td>不是人</td><td>124</td></tr><tr><td>3</td><td>不是你</td><td>154</td></tr></tbody><h3 class="mark">3.6 状态表格</h3><table class="table table-striped"><thead><th>编号</th><th>姓名</th><th>年龄</th></thead><tbody><tr class="active"><td>1</td><td>好家伙</td><td>123</td></tr><tr class="success"><td>2</td><td>不是人</td><td>124</td></tr><tr class="info"><td>3</td><td>不是你</td><td>154</td></tr></tbody><h3 class="mark">3.7 响应式表格</h3><table class="table table-responsive"><thead><th>编号</th><th>姓名</th><th>年龄</th></thead><tbody><tr><td>1</td><td>好家伙</td><td>123</td></tr><tr><td>2</td><td>不是人</td><td>124</td></tr><tr><td>3</td><td>不是你</td><td>154</td></tr></tbody><br /><br /><br /><br /></body>
</html>

Bootstrap-CSS全样式相关推荐

对Bootstrap的css基础样式进行总结归纳
概览这篇博文是对bootstrap官方文档的总结,为什么我要对它进行总结呢?哈哈,有两个原因,第一,我想复习一下bootstrap框架的知识,第二,我有点不适应官方文档说的繁琐,冗余.我想自己做一份 ...
Python全栈（九）Web前端基础之3.CSS常见样式和选择器
文章目录一.CSS常见样式 1.常见文本样式 2.列表常见样式 3.背景样式 4.浮动样式二.CSS常用选择器 1.CSS元素选择器介绍 2.元素选择器 3.id选择器 4.类选择器 5.通配选择 ...
BootStrap 组件和样式
BootStrap 简介概念: 课程目标: 响应式布局技术了解BootStrap前端框架二.BootStrap Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局.移动设备优 ...
vue项目html引入css,vue项目引入自定义.css的样式文件
ES6的引入方式: .vue文件中 css文件引入 @import "../assets/common/common.css";//自定义.css的样式路径 js文件的引入在ma ...
html css bootstrap,CSS Bootstrap是什么？
bootstrap是什么?bootstrap有什么用?bootstrap是框架吗?对于刚刚接触bootstrap的学生来说,对bootstrap并不了解.下面本篇文章就来给大家介绍一下bootstra ...
ASP.NET MVC使用Bootstrap系统（2）——使用Bootstrap CSS和HTML元素
ASP.NET MVC使用Bootstrap系统(2)--使用Bootstrap CSS和HTML元素阅读目录 Bootstrap 栅格(Grid)系统 Bootstrap HTML元素 Boots ...
bootstrap -- css -- 表格
Bootstrap 表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签描述 <table> 为表格添加基础样式. < ...
从Chrome中的css自定义样式按钮中删除蓝色边框
本文翻译自:Remove blue border from css custom-styled button in Chrome I'm working on a web page, and I wa ...
html 对话框 flatballoon,CSS纯样式实现箭头、对话框等形状
在使用第三方框架bootstrap的时候,本以为其是图片实现的小箭头,后来使用开发工具查看是用CSS来实现的,现记录如下: 理解完上面伪类的用法后,下面进入主题,直接贴上代码, border test ...
一分钟实现纯CSS全屏滚动特效
一分钟实现纯CSS全屏滚动特效 Hello World [你好世界]-Hello World-"无论世界多么崩坏,我都只想再见到她的笑颜" 端午节快乐! 会用到的CSS属性 bac ...

Bootstrap-CSS全样式

Bootstrap-CSS全样式相关推荐

最新文章

热门文章