摘要： flex-direction flex-direction 顺序指定了弹性子元素在父容器中的位置。 语法 flex-direction的值有: row：横向从左到右排列（左对齐），默认的排列方式。 row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。 column：纵向排列 阅读全文

摘要： 我们可以修改排列方式。 如果我们设置 direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变，页面布局也跟着改变: 实例 body { direction: rtl; } .flex-container { display: -webkit-flex; di 阅读全文

摘要： 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 弹性容器内包含了一个或多个弹性子元素。 注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹 阅读全文

摘要： 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 阅读全文

摘要： 即便有上面给出的四组栅格class，你也不免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix 和 响应式工具类。 <div class="row"> <div class="col-xs-6 col-sm-3">.col-xs- 阅读全文

摘要： 使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。 <div class="row"> <div class="col 阅读全文

摘要： Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。 .container 类用于固定宽度并支持响应式布局的容器。 Copy .container-fluid 类用于 10 阅读全文

摘要： 为输入框组添加按钮需要额外添加一层嵌套，不是 .input-group-addon，而是添加 .input-group-btn 来包裹按钮元素。由于不同浏览器的默认样式无法被统一的重新赋值，所以才需要这样做。 <div class="row"> <div class="col-lg-6"> <div 阅读全文

摘要： 通过使用 focus 触发器可以在用户点击弹出框是让其消失。 实现“点击并让弹出框消失”的效果需要一些额外的代码 为了更好的跨浏览器和跨平台效果，你必须使用 <a> 标签，不能使用 <button> 标签，并且，还必须包含 tabindex 属性。 <a tabindex="0" class="bt 阅读全文

摘要： 如果你不需要模态框弹出时的动画效果（淡入淡出效果），删掉 .fade 类即可。 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@ 阅读全文