随笔分类 - Bootstrap
摘要：一、BootstrapValidator插件简介 BootstrapValidator，是基于Bootstrap的表单校验插件，内置了许多表单验证器，也可以自定义验证器 BootstrapValidator的开发者：国外的nghuuphuoc开发的 BootstrapValidator包下载地址：
阅读全文
摘要：轮播图 轮播插件（carousel），一般是将大小相同的图片按照顺序依次播放。 1、轮播实例 1.1 通过data属性调用轮播插件 <!DOCTYPE html> <html> <head> <!-- HTML5文档类型 --> <meta charset="utf-8"> <!-- 移动端适配 -
阅读全文
摘要：折叠插件 折叠插件（collapse），通过点击折叠和展开内容。 1、折叠插件的用法 1.1 通过data属性调用折叠插件 <!-- 方法1 通过data属性调用折叠插件 --> <button class="btn btn-primary" data-toggle="collapse" data-
阅读全文
摘要：弹出框 弹出框依赖 工具提示插件 ，因此，如果你定制了 Bootstrap，一定要注意将依赖的插件编译进去。 由于性能的原因，工具提示和弹出框的 data 编程接口（data api）是必须要手动初始化的。在一个页面上一次性初始化所有弹出框的方式是通过 data-toggle 属性选中他们： $(f
阅读全文
摘要：工具提示 工具提示插件是指当鼠标移动到元素上时显示提示消息，也可以自定义显示的方式。该插件必须要写 1、工具提示插件的实例 <!-- 工具提示 --> <button class="btn btn-default" data-toggle="tooltip" data-placement="left
阅读全文
摘要：标签页 tab标签页插件就是我们通常所说的选项卡功能。 1、用法 1.1 通过data属性使用标签页 <!-- 标签页 --> <ul class="nav nav-tabs"> <!-- 通过data属性的方式使用标签页插件 --> <li class="avtive"><a href="#htm
阅读全文
摘要：滚动监听 滚动监听插件是用来根据滚动条所处的位置来自动更新导航项的。如下所示，滚动导航条下面的区域并关注导航项的变化。下拉菜单中的条目也会自动高亮显示。 1、滚动侦听的实例 实现点击导航条中的列表项自动更新导航项。 实现高亮显示当前激活的链接。 2、滚动侦听的用法 <!DOCTYPE html> <
阅读全文
摘要：下拉菜单 1、下拉菜单实例 2、下拉菜单的用法 2.1 通过data属性调用下拉菜单 通过data属性 data-toggle="dropdown" ，来调用下拉菜单插件。 <!-- 通过data属性调用下拉列表 --> <div class="dropdown"> <button class="b
阅读全文
摘要：模态框 modal.js 模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集。 模态框的特点： 不支持同时打开多个模态框 （千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。） 模态框的 HTML 代码放置的位置（务必将模态框的 H
阅读全文
摘要：JavaScript 插件 jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中。 1、概览 1.1 JavaScript 插件的引入 1.1.1 单个引入 JavaScript 插件只单个引入需要用的js文件（使用 Bootstra
阅读全文
摘要：面板 虽然不总是必须，但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况，可以试试面板组件。 1、基本面板 默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。 <!-- 面板 --> <!-- 基本面板 --> <div cla
阅读全文
摘要：列表组 列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容。 1、基本列表组 最简单的列表组仅仅是一个带有多个列表条目的无序列表，另外还需要设置适当的类。我们提供了一些预定义的样式，你可以根据自身的需求通过 CSS 自己定制。 <!-- 列表组 --> <ul clas
阅读全文
摘要：媒体对象 这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。 1、默认样式 默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。 1.1 在内容块的左边添加图片 <!-- 默认样式
阅读全文
摘要：进度条 通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈。 1、默认样式进度条 <!-- 默认样式进度条 --> <div class="progress"> <div class="progress-bar" aria-valuenow="60" aria-valuemin="0" a
阅读全文
摘要：警告框 警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息。 1、默认的警告框 将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert 类是必须要设置的，另外我们还提供了有特殊意义的4个类（例如，.alert-success），代表不同的警告信息。 警告框没有默认
阅读全文
摘要：缩略图 通过缩略图组件扩展 Bootstrap 的 栅格系统，可以很容易地以网格的方式展示图像、视频、文本等内容。 如果你想实现一个类似 Pinterest 的页面效果（不同高度和/宽度的缩略图顺序排列）的话，你需要使用一个第三方插件，比如 Masonry、Isotope 或 Salvattore。
阅读全文
摘要：页头 页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果，还支持大部分其他组件（需要增加一些额外的样式）。 <div class="page-header"> <h1>Example page header <small
阅读全文
摘要：巨幕 这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容。 1、实例 如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，请把此组件放在所有 .container 元素的外面，并在组件内部添加一个 .container 元素。 <!-- 巨幕 --> <div class="
阅读全文
摘要：徽章 给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目。 1、实例 在链接/按钮上显示徽章。 <!-- 徽章 --> <!-- 链接中展示徽章 --> <a href="#">未读消息 <span class="badge">20</spa
阅读全文
摘要：标签 1、实例 实用类label和标签外观的类（例如：label-default）来设置标签显示。 <!-- 标签 --> <h3>Example heading <span class="label label-default">New</span></h3> <h6>最新的新闻做菜的方法全在这里
阅读全文
浙公网安备 33010602011771号