随笔分类 - Bootstrap
摘要：一、简介 Navbar 指导航条，它在移动设备上显示为折叠状态，在宽屏幕上水平展开。 "这里" 是一个线上例子。 {提示} 响应式导航条依赖 "collapse 插件" ，定制 Bootstrap 时务必要包含。 {设备的可访问性} 务必使用 元素，需要设置属性 。这样能让辅助设备道这是一个导航条。
阅读全文
摘要：一、简介 ScrollSpy 就是滚动监听。设置滚动监听方式有两种： 1. 标签 API 2. JavaScript 代码 监听区域也有两种可能： 1. 标签 2. 自定义标签元素 {注意} ScrollSpy 需要 "nav 组件的代码" 支持，才会正确高亮激活项。 二、通过标签 API 通过标签
阅读全文
摘要：一、简介 Carousel 就是指轮播图， "这里" 有完整的代码例子。它可以很简单的就构造出来，结构如下： 具体代码如下。 1. 将组件标记为轮播器， 设置轮播器图片切换效果是从右向左滑动。 2. 页面加载完成后， 确保轮播器自动启动。 3. 被标记为 幻灯片最开始显示的幻灯片。 二、Carous
阅读全文
摘要：简介 Tooltip 指提示框，Popover 指弹出框。 Tooltip 默认 Tooltip 功能是关闭的，使用前要手动开启。 Tooltip 可以用在 标签上。下面是它的完整代码： 是必需的。 data original title 标签的话，显示的是 属性值。 默认提示框出现在顶部 。 自定
阅读全文
摘要：一、简介 Collapse 插件为 HTML 标签提供折叠、展开行为，依赖 "transition.js" （ 文件中已包含）。 二、实现机制 实现 Collapse 效果需要： 1. 一个 标签： href 标签使用 属性。 2. 上面两种情况，都要添加 属性。 3. 被 Collapse 的目标
阅读全文
摘要：一、简介 Panel 指面板。 "这里" 有例子。 一个典型的面板的代码结构是这样的： 除了使用 这个默认样式，还可以使用的样式有： 1. 。 2. 。 3. 。 4. 。 5. 。 Panel 强大得还有一点，就是能搭配其它组件使用，这些组件包括：表格（tables）和列表（list groups
阅读全文
摘要：简介 List group 指列表。当然，Bootstrap 列表不局限于由 标签构成的。 Bootstrap 中一共三种列表的构成方式， "这里" 有一个例子： 1. 。 2. 。 3. 。 列表就是“父与子”的关系。在 Bootstrap 中，“父”要标记上 ，“子”要标记上 。 稍复杂些的：
阅读全文
摘要：一、简介 Nav 指导航页。 "这里" 是一个线上例子。 使用了 的标签就是一个 Nav。下面举例。 {注意} 记住，下面的几种导航页都依赖 。 二、导航页 添加 。 三、胶囊式导航页 将 换为 。 四、堆叠胶囊式导航页 添加 . 五、禁用的链接 在 .disabled`。 {注意} 只改变 ``
阅读全文
摘要：一、简介 Dropdown 就是下拉列表， "这里" 有一个例子。 Dropdown 的完整代码如下： {提示} 1. 这个类不是必须的，不过稍后讲到 Dropdown 的 JavaScript 代码调用时要使用它，所以为了方便，先在这里一并写入。 2. 表示 Dropdown 的容器，可根据具体情
阅读全文
摘要：一、简介 Modal 就是弹出框， "这里" 有一个例子。 Modal 的完整代码如下： 默认的 Modal 是隐藏的，让它出现有两种方式： 1. 标签 API 2. JavaScript 代码 二、通过标签 API Modal 的代码已经有了，接下来我们要为 Modal 设置 并且添加一个按钮，像
阅读全文
摘要：介绍 使用 Bootstrap v3.3.7 时，需要引入三个脚本文件。 1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css 2. http://lib.sinaapp.com/js/jquery/1.12
阅读全文