文章: 阅读:

Bootstrap 辅助类

Bootstrap 中的一些可能会派上用场的辅助类。使用通用的关闭图标来关闭模态框和警告框。使用 class .close 得到关闭图标。使用插入符表示下拉功能和方向。使用带有 class caret 的 span 元素得到该功能。可以分别使用 class pull-left 或 pull-right 来把元素向左或向右浮动。使用 class .center-block 来居中元素。如需清除元素的浮动，请使用 .clearfix class。可以通过使用 class .show 和 .hidden 来强行设置元素显示或隐藏（包括屏幕阅读器）。可以通过使用 class .sr-only 来把元素对所有设备隐藏，除了屏幕阅读器。
CSSBootstrap

阅读全文 >>

Bootstrap 图片

Bootstrap 提供了三个可对图片应用简单样式的 class，.img-rounded 添加 border-radius = 6px; 来获得图片圆角。.img-circle 添加 border-radius = 50%; 来让整个图片变成圆形。.img-thumbnail 添加一些内边距（padding）和一个灰色的边框。通过在 img 标签添加 .img-responsive 类来让图片支持响应式设计。图片将很好地扩展到父元素。
CSSBootstrap

阅读全文 >>

Bootstrap 按钮

任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式。可以在 a、button 或 input 元素上使用按钮 class。但是建议在 button 元素上使用按钮 class，避免跨浏览器的不一致性问题。Bootstrap 提供了激活、禁用等按钮状态的 class。按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。当禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。在 div 中直接使用 .btn-group 可以创建按钮组。可以通过 .btn-group-justified 类来设置自适应大小的按钮组。
CSSBootstrap

阅读全文 >>

Bootstrap 表单

Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。基本表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 form 标签添加 class .form-inline。水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。
CSSBootstrap

阅读全文 >>

Bootstrap 表格

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素。如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加 class .table，如下面实例所示。除了基本的表格标记和 .table class，还有一些可以用来为标记定义样式的类。通过把任意的 .table 包在 .table-responsive class 内，可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，将看不到任何的差别。
CSSBootstrap

阅读全文 >>

Bootstrap 代码

Bootstrap 允许以两种方式显示代码，第一种是 <code> 标签。如果想要内联显示代码，那么应该使用 <code> 标签。第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么应该使用 <pre> 标签。请确保当使用 <pre> 和 <code> 标签时，开始和结束标签使用了 unicode 变体：& lt; 和 & gt;。
CSSBootstrap

阅读全文 >>

Bootstrap 排版

Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。使用 Bootstrap 的排版特性，可以创建标题、段落、列表及其他内联元素。Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。为了给段落添加强调文本，则可以添加 class="lead"，这将得到更大更粗、行高更高的文本。HTML 的默认强调标签 small （设置文本为父文本大小的 85%）、strong（设置文本为更粗的文本）、em（设置文本为斜体）。
CSSBootstrap

阅读全文 >>

Bootstrap 网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。简单地说，网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
CSSBootstrap

阅读全文 >>

Bootstrap CSS 概览

Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，需要使用 HTML5 文档类型（Doctype）。 因此，在使用 Bootstrap 项目的开头包含下面的代码段。如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型（Doctype），可能会面临一些浏览器显示不一致的问题，甚至可能面临一些特定情境下的不一致，以致于代码不能通过 W3C 标准的验证。Bootstrap 3 的设计目标是移动设备优先，然后才是桌面设备。这实际上是一个非常及时的转变，因为现在越来越多的用户使用移动设备。
CSSBootstrap

阅读全文 >>

Bootstrap CSS 编码规范

Bootstrap CSS 编码规范。用两个空格来代替制表符（tab）-- 这是唯一能保证在所有环境下获得一致展现的方法。为选择器分组时，将单独的选择器单独放在一行。为了代码的易读性，在每个声明块的左花括号前添加一个空格。声明块的右花括号应当单独成行。每条声明语句的 后应该插入一个空格。为了获得更准确的错误报告，每条声明都应该独占一行。所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。
CSSBootstrap

阅读全文 >>

Bootstrap HTML 编码规范

Bootstrap HTML 编码规范。用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。嵌套元素应当缩进一次（即两个空格）。对于属性的定义，确保全部使用双引号，绝不要使用单引号。不要在自闭合（self-closing）元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。不要省略可选的结束标签（closing tag）。为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。
CSSBootstrap

阅读全文 >>

Bootstrap 基础知识

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
CSSBootstrap

阅读全文 >>

Font Awesome 图标

Font Awesome 是一套绝佳的图标字体库和 CSS 框架。Font Awesome 提供可缩放的矢量图标，可以使用 CSS 所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。Font Awesome 从 4.1.0 版本开始不再支持 IE7，但更早的版本仍然支持。可以将 Font Awesome 图标使用在几乎任何地方，只需要使用 CSS 前缀 `fa`，再加上图标名称。
CSSFont Awesome

阅读全文 >>

Less 快速入门

变量（Variables）、混合（Mixins）、嵌套（Nesting）、运算（Operations）、转义（Escaping）、函数（Functions）、命名空间和访问符、映射（Maps）、作用域（Scope）、注释（Comments）、导入（Importing）。
CSSLess

阅读全文 >>