概览

深入了解 ShiinaUI 底层结构的关键部分,包括我们让 web 开发变得更好、更快、更强壮的最佳实践。

HTML5 文档类型

ShiinaUI 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

<!DOCTYPE html>
<html lang="zh-TW">
  ...
</html>

移动设备优先

在 ShiinaUI 中,我们使其就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式,而是直接融合进了框架的内核中。也就是说, ShiinaUI 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落,而不是增加一个额外的文件。

为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签。

<meta name="viewport" content="width=device-width, initial-scale=1"> 

在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。注意,这种方式我们并不推荐所有网站使用,还是要看你自己的情况而定!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 

排版与链接

ShiinaUI 排版、链接样式设置了基本的全局样式。分别是:

  • 为 body 元素设置 background-color: #ffffff;
  • 为所有链接设置了基本颜色

布局容器

ShiinaUI 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div> 

.container-full 类用于 100% 宽度,占据全部视口(viewport)的容器。

<div class="container-full">
  ...
</div> 

栅格系统

ShiinaUI 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

栅格参数

通过下表可以详细查看 ShiinaUI 的栅格系统是如何在多种屏幕设备上工作的。

超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C
类前缀 .col-xs- .col-s- .col-m- .col-b-
列(column)数 12

实例:从堆叠到水平排列

使用单一的一组 .col-m-* 栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列。

.col-m-1
.col-m-1
.col-m-1
.col-m-1
.col-m-1
.col-m-1
.col-m-1
.col-m-1
.col-m-1
.col-m-1
.col-m-1
.col-m-1
.col-m-8
.col-m-4
.col-m-4
.col-m-4
.col-m-4
.col-m-6
.col-m-6
<div class="row">
  <div class="col-m-1">.col-m-1</div>
  <div class="col-m-1">.col-m-1</div>
  <div class="col-m-1">.col-m-1</div>
  <div class="col-m-1">.col-m-1</div>
  <div class="col-m-1">.col-m-1</div>
  <div class="col-m-1">.col-m-1</div>
  <div class="col-m-1">.col-m-1</div>
  <div class="col-m-1">.col-m-1</div>
  <div class="col-m-1">.col-m-1</div>
  <div class="col-m-1">.col-m-1</div>
  <div class="col-m-1">.col-m-1</div>
  <div class="col-m-1">.col-m-1</div>
</div>

<div class="row">
  <div class="col-m-8">.col-m-8</div>
  <div class="col-m-4">.col-m-4</div>
</div>

<div class="row">
  <div class="col-m-4">.col-m-4</div>
  <div class="col-m-4">.col-m-4</div>
  <div class="col-m-4">.col-m-4</div>
</div>

<div class="row">
  <div class="col-m-6">.col-m-6</div>
  <div class="col-m-6">.col-m-6</div>
</div>

实例:流式布局容器

将最外面的布局元素 .container 修改为 .container-fluid,就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div> 

实例:移动设备和桌面屏幕

是否不希望在小屏幕设备上所有列都堆叠在一起?那就使用针对超小屏幕和中等屏幕设备所定义的类吧,即 .col-xs-* 和 .col-m-*。请看下面的实例,研究一下这些是如何工作的。

.col-xs-12 .col-m-8
.col-xs-6 .col-m-4
.col-xs-6 .col-m-4
.col-xs-6 .col-m-4
.col-xs-6 .col-m-4
.col-xs-6
.col-xs-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-m-8">.col-xs-12 .col-m-8</div>
  <div class="col-xs-6 col-m-4">.col-xs-6 .col-m-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-m-4">.col-xs-6 .col-m-4</div>
  <div class="col-xs-6 col-m-4">.col-xs-6 .col-m-4</div>
  <div class="col-xs-6 col-m-4">.col-xs-6 .col-m-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

实例:手机、平板、桌面

在上面案例的基础上,通过使用针对平板设备的 .col-s-* 类,我们来创建更加动态和强大的布局吧。

.col-xs-12 .col-s-6 .col-m-8
.col-xs-6 .col-m-4
.col-xs-6 .col-s-4
.col-xs-6 .col-s-4
.col-xs-6 .col-s-4
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-s-6 .col-m-8</div>
  <div class="col-xs-6 col-m-4">.col-xs-6 .col-m-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-s-4">.col-xs-6 .col-s-4</div>
  <div class="col-xs-6 col-s-4">.col-xs-6 .col-s-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->   
  <div class="clearfix visible"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-s-4</div>
</div>  

实例:多余的列(column)将另起一行排列

如果在一个 .row 内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元被另起一行排列。

.col-xs-9
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-xs-6
Subsequent columns continue along the new line.
<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
  </div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.
  </div>
</div> 

响应式列重置

即便有上面给出的四组栅格class,你也不免会碰到一些问题,例如,在某些阈值时,某些列可能会出现比别的列高的情况。为了克服这一问题,建议联合使用 .clearfix 和响应工具类。

.col-xs-6 .col-s-3
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-s-3
.col-xs-6 .col-s-3
.col-xs-6 .col-s-3
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div> 

列偏移

使用 .col-m-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如,.col-m-offset-4 类将 .col-m-4 元素向右侧偏移了4个列(column)的宽度。

.col-m-4
.col-m-4 .col-m-offset-4
.col-m-3 .col-m-offset-3
.col-m-3 .col-m-offset-3
.col-m-6 .col-m-offset-3
<div class="row">
  <div class="col-m-4">.col-m-4</div>
  <div class="col-m-4 col-m-offset-4">.col-m-4 .col-m-offset-4</div>
</div>

<div class="row">
  <div class="col-m-3 col-m-offset-3">.col-m-3 .col-m-offset-3</div>
  <div class="col-m-3 col-m-offset-3">.col-m-3 .col-m-offset-3</div>
</div>

<div class="row">
  <div class="col-m-6 col-m-offset-3">.col-m-6 .col-m-offset-3</div>
</div> 

嵌套列

为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-s-* 元素到已经存在的 .col-s-* 元素内。被嵌套的行(row)所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列)。

Level 1: .col-s-9
Level 2: .col-xs-8 .col-s-6
Level 2: .col-xs-4 .col-s-6
<div class="row">
  <div class="col-sm-9">
  Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
      Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
      Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div> 

排版

标题

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

h1. ShiinaUI heading

Semibold 36px

h2. ShiinaUI heading

Semibold 30px

h3. ShiinaUI heading

Semibold 24px

h4. ShiinaUI heading

Semibold 18px
h5. ShiinaUI heading
Semibold 14px
h6. ShiinaUI heading
Semibold 12px
<h1>h1. ShiinaUI heading</h1>
<h2>h2. ShiinaUI heading</h2>
<h3>h3. ShiinaUI heading</h3>
<h4>h4. ShiinaUI heading</h4>
<h5>h5. ShiinaUI heading</h5>
<h6>h6. ShiinaUI heading</h6> 

在标题内还可以包含 <small> 标签,可以用来标记副标题。

h1. ShiinaUI heading Secondary text

h2. ShiinaUI heading Secondary text

h3. ShiinaUI heading Secondary text

h4. ShiinaUI heading Secondary text

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

页面主体

ShiinaUI 将全局 font-size 设置为 14pxline-height 设置为 1.5。这些属性直接赋予 <body> 元素和所有段落元素。另外,<p> (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p> 

内联文本元素

高亮文本

高亮文本使用 <mark> 标记。

You can use the mark tag to highlight text.

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

小号文本

对于不需要强调的inline或block类型的文本,使用 <small> 标签包裹,其内的文本将被设置为父容器字体大小的 70%。标题元素中嵌套的 <small> 元素被设置不同的 font-size 。

This line of text is meant to be treated as fine print.

<small>This line of text is meant to be treated as fine print.</small> 

着重

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

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong> 

斜体

用斜体强调一段文本。

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em> 

对齐

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

Left aligned text.

Center aligned text.

Right aligned text.

No wrap text.

<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-nowrap">No wrap text.</p> 

改变大小写

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

Lowercased text.

Uppercased text.

Capitalized text.

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

缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容,ShiinaUI 实现了对 HTML 的 <abbr> 元素的增强样式。缩略语元素带有 title 属性,外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上(对使用辅助技术的用户也可见), 但需要包含 title 属性。

基本缩略语

An abbreviation of the word attribute is attr.

<abbr title="attribute">attr</abbr> 

地址

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

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Full Name
first.last@example.com
<address>   
  <strong>Twitter, Inc.</strong><br>   
  1355 Market Street, Suite 900<br>   
  San Francisco, CA 94103<br>   
  <abbr title="Phone">P:</abbr> (123) 456-7890 
</address> 

<address>   
  <strong>Full Name</strong><br>   
  <a href="mailto:#">first.last@example.com</a> 
</address> 

引用

默认样式的引用

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>   
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> 
</blockquote> 

多种引用样式

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote>   
  <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> 

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote class="blockquote-reverse">   
  ... 
</blockquote> 

内联代码

通过 <code> 标签包裹内联样式的代码片段。

For example, <section> should be wrapped as inline.
For example, <code><section></code> should be wrapped as inline. 

用户输入

通过 <kbd> 标签标记用户通过键盘输入的内容。

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> 
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> 

代码块

多行代码可以使用 <pre> 标签。为了正确的展示代码,注意将尖括号做转义处理。

<p>Sample text here...</p>
<pre>&lt ;p&gt ;Sample text here...&lt ;/p&gt ;</pre> /* 使用时删除空格 */

还可以使用 .pre-scrollable 类,其作用是设置 max-height 为 350px ,并在垂直方向展示滚动条。

程序输出

通过 <samp> 标签来标记程序输出的内容。

This text is meant to be treated as sample output from a computer program.

<samp>This text is meant to be treated as sample output from a computer program.</samp> 

上标文本

这段文本包含上标

<p>这段文本包含 <sup>上标</sup></p> 

下标文本

这段文本包含下标

<p>这段文本包含 <sub>下标</sub></p>  

列表

无序列表

排列顺序无关紧要的一列元素。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>...</li>
</ul> 

有序列表

顺序至关重要的一组元素。

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol> 

无样式列表

移除了默认的 list-style 样式和左侧外边距的一组元素(只针对直接子元素)。这是针对直接子元素的,也就是说,你需要对所有嵌套的列表都添加这个类才能具有同样的样式。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li>...</li>
</ul> 

内联列表

通过设置 display: inline-block; 并添加少量的内补(padding),将所有元素放置于同一行。

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li>...</li>
</ul> 

描述

带有描述的短语列表。

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl> 

水平排列的描述

.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起,随着导航条逐渐展开而排列在一行。

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl> 

表格

基本实例

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来。

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
  ...
</table> 

条纹状表格

通过 .table-strip-odd 或者 .table-strip-even 可以给 <tbody> 之内的每一行增加斑马条纹样式。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-strip-odd">
  ...
</table> 

带边框的表格

添加 .table-border 类为表格和其中的每个单元格增加边框。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-border">
  ... 
</table> 

鼠标悬停

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover">
  ...
</table> 

状态类

通过这些状态类可以为行或单元格设置颜色。

Class 描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作