Bootstrap响应式前端框架笔记二——排版标签与类

简介: Bootstrap响应式前端框架笔记二——排版标签与类

Bootstrap中对h标签的字体和字号进行了微调,开发者除了可以直接使用这些标签进行标题的修饰外,还可以使用.h1到.h6类来将其他元素的字体进行修饰,示例如下:


 <p>h1 到 h6 标签的样式</p>

 <h1>h1. Bootstrap heading</h1>

 <h2>h2. Bootstrap heading</h2>

 <h3>h3. Bootstrap heading</h3>

 <h4>h4. Bootstrap heading</h4>

 <h5>h5. Bootstrap heading</h5>

 <h6>h6. Bootstrap heading</h6>

 <hr />

 <p>.h1 到 .h6 类的样式</p>

 <div class="h1">h1. Bootstrap heading</div>

 <div class="h2">h1. Bootstrap heading</div>

 <div class="h3">h1. Bootstrap heading</div>

 <div class="h4">h1. Bootstrap heading</div>

 <div class="h5">h1. Bootstrap heading</div>

 <div class="h6">h1. Bootstrap heading</div>

   在标题或者其他标签中使用small标签或者small类可以添加内部副标题,副标题除了字号会进行缩小调整外,还会修改文字的颜色,示例如下:


 <p>可以使用small标签或者.samll类来向标题中添加副标题</p>

 <h3>h3标题 <small>small标签副标题</small></h3>

 <span class="h3">h3Class类 <span class="small">small类副标题</span></span>


   使用.lead可以实现段落的强调显示,示例如下:


 <p>这是一个普通段落</p>

 <p class="lead">这是一个强调段落</p>

 <p>这是一个普通段落</p>

效果如下:


image.png


   使用mark标签或者mark类可以进行特殊文本的标记,如下:


 <p>使用mark标签可以实现部分文本进行标记</p>

 <div class="mark">进行<mark>特殊文字</mark>的标记</div>

效果如下:

image.png



   使用del标签或者s标签可以实现对文本添加删除线效果,如下:


 <p>使用del标签或者s标签可以实现文本的删除效果</p>

 <del>del标签的删除效果</del>

 <br />

 <s>s标签的删除效果</s>

效果如下:

image.png



   使用ins标签或者u标签可以实现为本文添加下划线效果,示例如下:


 <p>使用ins标签或者u标签可以实现文本添加下划线</p>

 <ins>ins标签的下划线效果</ins>

 <br />

 <u>u标签的下划线效果</u>

效果如下:


image.png


   使用strong标签可以对特殊本文进行着重标记,如下:


 <p>使用strong标签可以实现对特殊文本进行着重标记</p>

 <div>进行文本的<strong>着重</strong>标记</div>

效果如下图


image.png


   使用em标签可以进行特殊文本的斜体处理,如下:


 <p>使用em标签可以进行文本的斜体处理</p>

 <p>进行<em>特殊文本</em>的斜体处理</p>

效果如下:


image.png


   使用text-left类可以实现文本的左对齐布局,与之对应text-center将文本进行中心对齐布局,text-right类来将文本进行右对齐布局,text-justufy类设置文本进行自适应对齐,text-nowarp类将设置文本不换行的进行布局,示例如下:


 <mark>text-left类进行左对齐布局</mark>

 <p class="text-left ">文本左对齐排版。文本左对齐排版。文本左对齐排版。文本左对齐排版。文本左对齐排版。文本左对齐排版。文本左对齐排版。文本左对齐排版。文本左对齐排版。文本左对齐排版。文本左对齐排版。文本左对齐排版。</p>

 <mark>text-center类进行中心对齐布局</mark>

 <p class="text-center ">文本居中对齐。文本居中对齐。文本居中对齐。文本居中对齐。文本居中对齐。文本居中对齐。文本居中对齐。文本居中对齐。文本居中对齐。文本居中对齐。文本居中对齐。文本居中对齐。</p>

 <mark>text-right类进行右对齐布局</mark>

 <p class="text-right ">文本右对齐。文本右对齐。文本右对齐。文本右对齐。文本右对齐。文本右对齐。文本右对齐。文本右对齐。文本右对齐。文本右对齐。文本右对齐。文本右对齐。</p>

 <mark>text-justify类进行自适应布局</mark>

 <p class="text-justify ">正常方向布局。正常方向布局。正常方向布局。正常方向布局。正常方向布局。正常方向布局。正常方向布局。正常方向布局。正常方向布局。正常方向布局。</p>

 <mark>text-nowarp类进行不换行布局</mark>

 <p class="text-nowrap">不换行布局。不换行布局。不换行布局。不换行布局。不换行布局。不换行布局。不换行布局。不换行布局。不换行布局。不换行布局。</p>

效果如下图:

image.png



       text-lowercase类可以将所有修饰的文本转换成小写,与之对应text-uppercase类可以将所有修饰的文本转换成大写,text-capitalize类则只会处理每个单词的首字母,将其转换为大写。示例如下:


 <mark>将所有字母转换成小写字母</mark>

 <p class="text-lowercase">My name is Jaki.</p>

 <mark>将所有字母转换成大写字母</mark>

 <p class="text-uppercase">My name is Jaki.</p>

 <mark>将所有单词首字母字母转换成大写字母</mark>

 <p class="text-capitalize">My name is Jaki.</p>

效果如下图:


image.png


   使用abbr标签可以进行某些内容的缩略显示,示例如下:


 使用abbr标签可以将某些文本进行缩略设置,当鼠标放置在对应文本上时,会显示标签中title所设置的内容

 <abbr title="这个是详细信息">信息</abbr>



   如果要在页面中进行内容的引用,可以使用blockquote标签进行包裹,在blockquote标签中可以继续嵌套footer标签来进行引用的标注,如下:


 使用blockquote标签可以进行内容的引用,其中可以嵌套fooer标签进行标注

 <blockquote>

  <p>冰冻三尺,非一日之寒。</p>

  <footer>俗语</footer>

 </blockquote>




   .blockquote-reverse类可以将blockquote中的内容进行右对齐,示例如下:


 <hr /> 使用blockquote标签可以进行内容的引用,其中可以嵌套fooer标签进行标注

 <blockquote class="blockquote-reverse">

  <p>冰冻三尺,非一日之寒。</p>

  <footer>俗语</footer>

 </blockquote>



  另外,本篇博客中所有的实例代码及显示效果,在如下地址中,需要的可以自行对照学习。


http://zyhshao.github.io/bootStrapDemo/typeset.html。

目录
相关文章
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
1804 14
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
1178 1
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
1193 0
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
578 6
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
前端开发 JavaScript
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
这篇文章介绍了使用AJAX技术将前端页面中表单接收的多个参数快速便捷地传输到后端servlet的方法,并通过示例代码展示了前端JavaScript中的AJAX调用和后端servlet的接收处理。
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
989 6
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
677 14