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

目录
相关文章
|
15天前
|
编解码 前端开发 JavaScript
构建高效响应式Web界面:现代前端框架的比较
【4月更文挑战第9天】在移动设备和多样屏幕尺寸盛行的时代,构建能够适应不同视口的响应式Web界面变得至关重要。本文深入探讨了几种流行的前端框架——Bootstrap、Foundation和Tailwind CSS,分析它们在创建响应式设计中的优势与局限。通过对比这些框架的栅格系统、组件库和定制化能力,开发者可以更好地理解如何选择合适的工具来优化前端开发流程,并最终实现高性能、跨平台兼容的用户界面。
N..
|
1月前
|
开发框架 前端开发 容器
Bootstrap排版
Bootstrap排版
N..
12 0
|
1月前
|
前端开发
前端通过input标签封装Upload组件实现文件上传
前端通过input标签封装Upload组件实现文件上传
53 0
|
1月前
|
Web App开发 前端开发 JavaScript
构建响应式Web界面:现代前端开发的最佳实践
【2月更文挑战第15天】 在多设备浏览时代,响应式Web设计成为前端开发者的必备技能。本文将深入探讨实现响应式界面的核心概念、技术栈以及工具,帮助读者掌握从布局到交互的全方位解决方案。通过灵活运用CSS框架、媒体查询及JavaScript,开发者可以创建出适应不同屏幕尺寸和分辨率的网站。文章不仅涵盖理论分析,还包含实际案例,确保读者能够将知识应用于实际项目中。
|
10天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
1月前
|
开发框架 Dart 前端开发
构建响应式Web界面:Flutter的跨界前端技术
【2月更文挑战第23天】随着移动互联网的飞速发展,响应式Web设计成为现代前端开发的重要趋势。在众多框架中,Google推出的Flutter以其高效的渲染性能、跨平台能力及丰富的组件生态,为前端开发者带来了新的选择。本文将深入探讨如何利用Flutter进行高效、美观的响应式界面构建,同时剖析其与传统前端技术的差异和优势。
|
1月前
|
Web App开发 SQL 前端开发
性能工具之前端分析工Chrome Developer Tools性能标签
【2月更文挑战第22天】性能工具之前端分析工Chrome Developer Tools性能标签
36 1
性能工具之前端分析工Chrome Developer Tools性能标签
|
1月前
|
Web App开发 编解码 前端开发
构建响应式Web界面:现代前端开发的实用指南
【2月更文挑战第22天】 随着移动互联网的兴起,响应式网页设计已成为前端开发者必须掌握的核心技能之一。本文将深入探讨如何通过灵活运用HTML5、CSS3和JavaScript等技术,构建出能够适应不同屏幕尺寸和设备的Web界面。文章不仅涉及理论概念,还包含具体实践案例,旨在帮助读者理解并应用响应式设计的核心原则,从而提升网站的用户体验和访问效率。
|
1月前
|
Web App开发 前端开发 JavaScript
前端技术探索与应用:构建高性能响应式网页
本文将介绍前端技术的最新发展和应用,重点探讨如何构建高性能响应式网页。通过深入解析前端框架、优化技巧以及调试工具等方面的内容,帮助读者提升网页的交互体验和加载速度,实现用户友好的界面设计。
|
1月前
|
缓存 前端开发 开发者
构建响应式Web界面:现代前端开发的实用指南
【2月更文挑战第19天】 在多设备浏览的时代,为不同屏幕尺寸和分辨率优化网站变得至关重要。本文将深入探讨响应式Web设计的核心概念、关键技术和实现策略,旨在引导前端开发者通过灵活布局、媒体查询和现代化工具,打造出能够适应各种终端的界面。我们将从基础理论出发,逐步过渡到实战技巧,最后讨论当前趋势与未来展望,以帮助读者构建出高效、美观且用户友好的响应式Web界面。