Bootstrap样式(下)

简介: Bootstrap样式(下)

css全局样式

排版

标题

HTML 中的所有标题标签,<h1><h6> 均可使用。另外,还提供了 .h1.h6 类,为的是给内联(inline)属性的文本赋予标题的样式。

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

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

页面主体

内联文本元素

为了突出显示与另一个上下文中相关的文本,可以使用<mark>标记。

You can use the mark tag to <mark>highlight</mark> text.

对于被删除的文本使用 <del> 标签。

<del>This line of text is meant to be treated as deleted text.</del>

为文本添加下划线,使用 <u> 标签。

<u>This line of text will render as underlined</u>

通过增加 font-weight 值强调一段文本

<strong>rendered as bold text</strong>

用斜体强调一段文本。

<em>rendered as italicized text</em>

对齐

通过文本对齐类,可以简单方便的将文字重新对齐。

<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>

改变大小写

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

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

按钮

禁用状态

disabled 属性,使其表现出禁用状态。

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

图片

图片形状

通过为 <img> 元素添加以下相应的类,可以让图片呈现不同的形状。

<img src="..." alt="..." class="img-rounded">//方形
<img src="..." alt="..." class="img-circle">//圆形
<img src="..." alt="..." class="img-thumbnail">//方形带边框
相关文章
|
4月前
|
前端开发
【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
【1月更文挑战第17天】【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
|
6月前
|
前端开发 程序员 Android开发
Bootstrap+jQuery实现卡片标签样式的分页
Bootstrap+jQuery实现卡片标签样式的分页
40 0
|
7月前
|
前端开发
|
7月前
|
前端开发
|
8月前
|
前端开发 JavaScript 数据安全/隐私保护
Bootstrap 表单样式-水平排列
Bootstrap 表单样式-水平排列
43 0
|
2月前
|
前端开发
bootstrap样式代码案例
bootstrap样式代码案例
11 0
|
2月前
|
前端开发 JavaScript 容器
bootstrap样式
bootstrap样式
11 0
|
2月前
|
前端开发
uni-app中基于bootstrap的css样式
uni-app中基于bootstrap的css样式
33 0
|
7月前
|
前端开发