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模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
1663 14
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
1074 0
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
529 2
|
前端开发
Bootstrap5 文字排版3
Bootstrap 5 默认字体大小为 16px,行高 1.5,字体族为 &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif。所有元素默认上边距为 0,下边距为 1rem (16px)。HTML 标题(h1 至 h6)和代码元素(code、kbd、pre)均有预设样式,方便快速开发和一致的视觉效果。
|
前端开发
Bootstrap5 文字排版2
Bootstrap 5 默认字体大小为 16px,行高 1.5,字体系列为 &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif。所有 HTML 标题(h1 至 h6)均有预设样式,段落默认上下间距为 16px。此外,Bootstrap 5 还提供了高亮文本、缩写、引用块和描述列表等元素的样式定义。
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
1432 1
|
前端开发 算法 测试技术
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
本文对比测试了通义千文、文心一言、智谱和讯飞等多个国产大模型在处理基础计数问题上的表现,特别是通过链式推理(COT)提示的效果。结果显示,GPTo1-mini、文心一言3.5和讯飞4.0Ultra在首轮测试中表现优秀,而其他模型在COT提示后也能显著提升正确率,唯有讯飞4.0-Lite表现不佳。测试强调了COT在提升模型逻辑推理能力中的重要性,并指出免费版本中智谱GLM较为可靠。
1164 0
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
|
移动开发 前端开发
Bootstrap5 文字排版1
Bootstrap 5 的默认文字排版设置包括:font-size 为 16px,line-height 为 1.5,font-family 为 &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif。所有元素的 margin-top 为 0,margin-bottom 为 1rem。HTML 标题(h1 至 h6)和 .h1 至 .h6 类均定义了样式,还有 .display-1 至 .display-4 类用于更大的标题样式。small 元素用于创建更小且颜色更浅的文本。

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1272
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    581
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    442
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    440
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    560
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    736
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1433
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    318
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1174
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    515