前端框架之bootstrap框架

2023-11-07 08:56•java•阅读 2357

一、前端框架

框架提前将很多样式都已经写好了，封装成了一个个类 .xxx{ } ，只要要我们添加对应的样式类 <input class=\'form-control\'></input> 即可

注意：想要使用前端框架，统一都必须先下载或者引用bootstrap框架。

bootstrap框架动态效果是基于jQuery的，所以你在使用bootstrap的时候要提前先导入jQuery

二、布局容器

Bootstrap框架需要为页面内容和栅格系统包裹一个容器

1、左右两边有留白的页面格式

</div>

2、占满全屏的页面格式

</div>

三、栅格系统

Bootstrap框架提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

用row 表示来划定行，默认一行是有12份的。

用col-md-数字表示来划定行的份数，一行就12份

用col-md-offset-数字表示从左往右移动几份，控制左右移动

注意：如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列

栅格参数：

前端框架之bootstrap框架

四、排版

1、标题标签：

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类

<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>
效果：字体从上到下逐渐变细

在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
效果：

<small>Secondary text</small>是副标题

2、内联文本元素

01、标记文本：

<mark>被标记的文本内容</mark>

前端框架之bootstrap框架

02、删除文本：

<del>要删除的文本内容</del>

前端框架之bootstrap框架

03、无用文本：

<s>无用的文本内容</s>

前端框架之bootstrap框架

04、插入文本：

<ins>要插入的文本内容</ins>

前端框架之bootstrap框架

05、为文本添加下划线：

<u>要加下划线的文本内容</u>

前端框架之bootstrap框架

06、着重（加粗）

<strong>要加粗的文本内容</strong>

前端框架之bootstrap框架

07、斜体

<em>要加下划线的文本内容</em>

前端框架之bootstrap框架

08、把单词或者短语或者发言/技术词汇进行高亮用：

<b>要高亮的单词或者短语</b>

<i>要高亮的发言/技术词汇</i>

09、对齐：通过文本对齐类，可以简单方便的将文字重新对齐。

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

10、大小写：通过这几个类可以改变文本的大小写。

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

11、缩略语：当鼠标悬停在缩写和缩写词上时就会显示完整内容，但需要包含 title 属性。

<abbr title="要缩略的文本内容">写要缩略成什么</abbr>

前端框架之bootstrap框架

效果描述：外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）

注意：首字母缩略语：可以为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。

前端框架之bootstrap框架

12、地址：让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。

前端框架之bootstrap框架

13、引用：在你的文档中引用其他来源的内容

将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，我们建议用 <p> 标签。

<blockquote> 要引用的内容</blockquote>

前端框架之bootstrap框架

命名来源

添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。

前端框架之bootstrap框架

另一种展示风格

通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。

前端框架之bootstrap框架

<blockquote class="blockquote-reverse">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

14、列表

无序列表：