学习笔记—bootstrap(2)
Bootstrap 排版
Bootstrap如果要向任何标题添加一个内联子标题，只需要在元素两旁添加<small>，或者添加.small class (可以得到一个自号更小颜色更浅的文本)
实例：<h1>This is a h1.<small>This is a small h1</small></h1>
可以添加class=“lead”，为段落添加强调文本（字体更大、粗体，行高更高的文本）
bootstrap强调:
<small>设置为父文本大小的85%</small><br>
<strong>设置文本为更粗的文本</strong><br>
<em>把文本设置为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>
Bootstrap定义<abbr>元素的样式为显示在文本底部的一条虚线边框，将鼠标悬停在上面时会显示完整的文本（要为<abbr>title属性添加文本），为<abbr>添加.initialism可以得到一个字体更小的文本
<address>用于在网页上显示联系信息，由于<address>默认为display：block，需要使用标签来为封闭的地址文本添加换行
引用<blockquote>，添加<small>标签来标示引用的来源，使用class .pull-right向右对其引用
Bootstrap 支持有序列表、无序列表和定义列表。
- 有序列表：有序列表是指以数字或其他有序字符开头的列表。
- 无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。
- 定义列表：在这种类型的列表中，每个列表项可以包含 <dt> 和 <dd> 元素。<dt> 代表 定义术语，就像字典，这是被定义的属于（或短语）。接着，<dd> 是 <dt> 的描述。您可以使用 class dl-horizontal 把 <dl> 行中的属于与描述并排显示。
| .lead | 使段落突出显示 | |
| .small | 设定小文本 (设置为父文本的 85% 大小) | |
| .text-left | 设定文本左对齐 | |
| .text-center | 设定文本居中对齐 | |
| .text-right | 设定文本右对齐 | |
| .text-justify | 设定文本对齐,段落中超出屏幕部分文字自动换行 | |
| .text-nowrap | 段落中超出屏幕部分不换行 | |
| .text-lowercase | 设定文本小写 | |
| .text-uppercase | 设定文本大写 | |
| .text-capitalize | 设定单词首字母大写 | |
| .initialism | 显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母 | |
| .blockquote-reverse | 设定引用右对齐 | |
| .list-unstyled | 移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式) | |
| .list-inline | 将所有列表项放置同一行 | |
| .dl-horizontal | 该类设置了浮动和偏移，应用于 <dl> 元素和 <dt> 元素中，具体实现可以查看实例 | |
| .pre-scrollable | 使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条 |
学习笔记—bootstrap(2)相关推荐
- 前端学习笔记 bootstrap（三）
模态窗体 会有个慢慢出来的效果,注意data-toggle是指切换方式,值为modal就代表是以模态窗口的样式切换.data-target是切换的目标.然后modal fade就是一个有动画的模态窗口 ...
- Bootstrap学习笔记
Bootstrap学习笔记 Bootstrap介绍 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵 ...
- Bootstrap学习笔记-布局
Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html> <head> <meta charset="utf ...
- Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端 学习路线 笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
- Bootstrap学习笔记01【快速入门、栅格布局】
Java后端 学习路线 笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
- 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...
- Bootstrap学习笔记系列1-------Bootstrap网格系统
目录 Bootstrap网格系统 学习笔记 简单网格 偏移列 嵌套列 列排序 Bootstrap网格系统 学习笔记 简单网格 先上代码再解释 <!DOCTYPE html> <htm ...
- 前端学习笔记：Bootstrap框架入门
前端学习笔记:Bootstrap框架入门 一.Bootstrap概述 1.基本信息 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS. ...
- bootstrap学习笔记一： bootstrap初认识，hello bootstrap（下）
这一篇主要是补上源码,开始之前请先回顾:bootstrap学习笔记一: bootstrap初认识,hello bootstrap(上) 首先,我们的页面要求, lang,charset等就不用说了,老 ...
- bootstrap pagewrapper_Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
继续上一篇,针对Bootstrap Metronic菜单栏整理的笔记分享给大家,供大家参考,具体内容如下 1.简介1) .环境配置 2) .提取页面 3).动态生成菜单(无限级别树) 2.系统环境 ...
最新文章
- Kubernetes 1.3版本之简单安装
- 关于idea中新建web项目 webapp文件夹没有小蓝点 ，启动服务，访问不到解决方案
- 文件服务器在哪里靠谱,vps作为文件服务器靠谱吗
- The Fuctions of LWAPP
- 10-异步爬虫（线程池/asyncio协程）实战案例
- c语言判断一个已知的二叉树是否是二叉排序树_10584 二叉树怎样序列化才能重建...
- 鸿蒙系统是安卓还是苹果,小雷问答丨鸿蒙系统到底和苹果安卓有什么区别？
- SpringAOP的SchemaBase方式
- NOIP2016D2T2 蚯蚓
- cf406E Hamming Triples (推公式)
- 微信小程序学习笔记-（9）-仿智行火车票
- Redux Reducer 的拆分
- 来自Java程序员的Python新手入门小结
- 【算法学习笔记001】捷联惯导算法心得
- 安卓手机m3u8转为mp4格式100%有效的方法
- html标签 补全方法 python,Python Beautiful Soup学习之HTML标签补全功能
- 升级鸿蒙手机内数据会删除吗,鸿蒙系统：手机升级不会删除任何文件，包括APP的登录状态都不会掉...
- 手机换IP的方法--手机PPTP
- 化工厂人员定位系统，有效提高化工安全
- solr mysql 增量索引_基于Solr DIH实现MySQL表数据全量索引和增量索引