Bootstrap读书笔记之CSS组件（上）

什么是CSS组件

• 一套基于语义化的、可重用的、跨浏览器的HTML/CSS常规设计
• 不需要增加Javascript即可进行交互
• 用于语意化地描述UI元素的外观和行为

CSS组件的主要类

基础文本元素

• h1~h6
• p
• mark
• small
• del
• s
• ins
• u
• strong
• em

链接

• a
• abbr
• address
• blockquote
• cite
• dl
• dt
• dd

列表

• ul
• ol
• li

表格

• table
• thead
• tbody
• tfoot
• tr
• th
• td

转译

• code
• kbd
• pre
• samp

内嵌

• img
• figure

表单

• form
• fieldset
• legend
• label
• input
• textarea
• button
• select
• optgroup
• option
• datalist
• output
• progress
• meter
• checkbox
• radio

CSS组件的示例

链接

<a href="#" class="btn btn-primary">Primary Link</a>
<a href="#" class="btn btn-warning">Warning Link</a>

以上为两个基于Bootstrap的链接按钮组件示例。其中，.btn表示这是一个按钮组件类，.btn-primary和.btn-warning表示该按钮的样式。点击后即可跳转到#。

转译

<code>code</code>
<kbd>ctrl</kbd>
<pre>preformatted text</pre>

以上为三个常见的转译组件示例。其中，<code>用于显示计算机代码，<kbd>用于显示键盘按键，<pre>用于显示格式预定义文字。这些组件可以使页面的信息更加清晰明了。