Bootstrap 排版
程序员文章站
2022-07-14 21:33:06
...
标题
六级标题,一号最大
<h1>我是标题1 h1</h1>
<h2>我是标题2 h2</h2>
<h3>我是标题3 h3</h3>
<h4>我是标题4 h4</h4>
<h5>我是标题5 h5</h5>
<h6>我是标题6 h6</h6>
副标题
small用于小标题
<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>
引导主题副本
<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。
这是一个演示引导主体副本用法的实例。这是一个演示引导
主体副本用法的实例。这是一个演示引导主体副本用法的实
例。这是一个演示引导主体副本用法的实例。这是一个演示
引导主体副本用法的实例。这是一个演示引导主体副本用法
的实例。这是一个演示引导主体副本用法的实例。</p>
特殊文本
<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>
列表及自定义列表
<h4>未定义样式列表</h4>
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>内联列表</h4>
<ul class="list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>定义列表</h4>
<dl>
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
<h4>水平的定义列表</h4>
<dl class="dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
常用排版样式
高亮及代码
<p><code><header></code> 作为内联元素被包围。</p>
<p>如果需要把代码显示为一个独立的块元素,请使用 <pre> 标签:</p>
<pre>
<article>
<h1>Article Heading</h1>
</article>
</pre>
上一篇: Java 简单工厂模式
推荐阅读
-
vue2.0数据双向绑定与表单bootstrap+vue组件
-
Bootstrap整体框架之JavaScript插件架构
-
bootstrap-table 常用总结-树形结构(展开和折叠)
-
vue中如何引入jQuery和Bootstrap
-
Bootstrap table学习笔记(2) 前后端分页模糊查询
-
BootStrap Table 后台数据绑定、特殊列处理、排序功能
-
基于BootStrap的前端分页带省略号和上下页效果
-
bootstrap table表格插件使用详解
-
bootstrap组件怎么使用(bootstrap响应式网页设计)
-
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置