如何使用雅虎Pure CSS网格系统

2023-02-21 15:19:02html-css014

如何使用雅虎Pure CSS网格系统,第1张

从默认网格入门

让我们先从一个基本的 HTML 开始，看看如何在上面应用默认网格。

<!DOCTYPE html>

<html>

<head>

<title>Fixed layout example with Bootstrap</title>

</head>

<body>

</body>

</html>

Bootstrap 使用 CSS 的 class "row" 来创建水平行，使用 CSS 的 class "spanx"（x 的值从 1 到 12）来创建垂直列。通过这两个就可以创建一个三列的网格（每一列包含一些文本内容），HTML 如下所示

<!DOCTYPE html>

<html>

<head>

<title>Fixed layout example with Bootstrap</title>

</head>

<body>

<div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div>

</div>

</body>

</html>

下面是网格系统的图形表示

这样，我们就通过对每个列使用 "span4" class，创建好了一个三列网格。"container" class 是用来保存整个结构的。您可以在这里查看在线实例。从这一点，我们可以推导出用于创建给定数量列的 CSS class 的一般语法。

创建网格的一般语法：

inline elements like span, block level elements like p, div.

</div>

repeat <div class="spanx">y times.

其中 y 是您想要创建的列数以及 x 等于 12（这是您可以创建的最大的列数）的总和。x 必须是正整数，且值必须从 1 到 12。

例如，如果您有三个等宽的列，每个列都是 class="span4"，但是如果您想让第一个列比其他两个更大一些，第一个列可以使用 class="span6"，其他两个列使用 class="span3"。

如何在固定网格中创建行

接下来，在我们继续其他实例之前，先来看看在固定网格中用来创建行和列的 CSS 规则。

row class 如下所示

.row {

margin-left: -20px

*zoom: 1

}

设置左边距为负的 20px，且设置 "*zoom: 1"。这里的 "*" 表示所有元素的 zoom 属性都设置为 1，用来修复 IE6/7 的 bug。设置 zoom 属性为 1，即设置了一个名为 hasLayout 的内部属性，用于修复 IE6/7 的许多缩放/渲染问题。

.row:before,

.row:after {

display: table

line-height: 0

content: ""

}

Bootstrap 使用前面的 CSS 代码来创建行。它使用 ":before" 和 ":after" 的 CSS 属性。这两个是伪元素。":before" 用于在目标元素之前插入一些内容，":after" 用于在目标元素之后插入一些内容。"display:table" 使得元素以表格形式呈现。通过设置 "line-height: 0" 来确保每个行没有自己的行高，通过使用 'content: ""' 来确保元素前后没有内容被插入。

常用的UI框架有哪些?推荐6种常用的UI框架。

接下来安徽电脑培训http://www.kmbdqn.cn/为大家分享一下UI专业设计师在日常工作中常用的几种框架，希望能够帮到你！Bootstrap说到流行的UI框架，那么Bootstrap是一定会出现在榜单上的。

它是由twitter推出的Web前端UI框架，它由Twitter的设计师MarkOtto和JacobThornton合作开发。

Bootstrap通过它优秀的栅栏系统，很好的实现了响应式布局。

Bootstrap还提供了时尚的排版样式，表单，buttons，表格，轮播等等。

Bootstrap提供了优雅的HTML和CSS规范，它是由动态CSS语言Less写成。

Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC(微软全国广播公司)的BreakingNews都使用了该项目。

国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

jQueryUIjQueryUI是建立在jQueryJavaScript库上的一组用户界面交互、特效、小部件及主题。

无论是创建高度交互的Web应用程序还是仅仅向窗体控件添加一个日期选择器，jQueryUI都是一个完美的选择。

jQueryUI包含了许多维持状态的小部件(Widget)，因此，它与典型的jQuery插件使用模式略有不同。

所有的jQueryUI小部件(Widget)使用相同的模式，这样就大大的降低了学习成本。