随笔分类 - Bootstrap
摘要：分页 1、默认分页 受 Rdio 的启发，我们提供了这个简单的分页组件，用在应用或搜索结果中超级棒。组件中的每个部分都很大，优点是容易点击、易缩放、点击区域大。 <!-- 默认分页 --> <nav aria-label="Page navigation"> <ul class="paginatio
阅读全文
摘要：路径导航 1、面包屑 <!-- 面包屑 --> <ol class="breadcrumb"> <li class="active">Home</li> </ol> <!-- 面包屑 --> <ol class="breadcrumb"> <li><a href="#">Home</a></li>
阅读全文
摘要：导航条 1、导航条的整体样式 1.1 导航条固定在顶部 添加 .navbar-fixed-top 类可以让导航条固定在顶部，还可包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）。 <nav class="navbar n
阅读全文
摘要：导航 Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。 1、标签页 注意 .nav-tabs 类依赖 .nav 基类。 <!-- 导航（标签页） --> <ul class="nav nav-tabs"> <li class="active"><
阅读全文
摘要：输入框组 1、基本实例 在输入框的任意一侧添加额外元素或按钮。你还可以在输入框的两侧同时添加额外元素。 为 .input-group 添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。不需要为输入框组中的每个元素重复地添加控制尺寸的类。 <!-- 输入框组 （基本用法）--> <div cla
阅读全文
摘要：按钮式下拉菜单 把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。 1、单按钮下拉菜单 只要改变一些基本的标记，就能把按钮变成下拉菜单的开关。 <!-- 按钮式下拉菜单 --> <div class="btn-group"> <button cla
阅读全文
摘要：按钮组 1、基本实例 把多个按钮放在一个容器中，添加类.btn-group即可。 <!-- 按钮组 --> <div class="btn-group" role="group"> <button class="btn btn-default">按钮1</button> <button class=
阅读全文
摘要：下拉菜单 用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。 1、实例 通过为下拉菜单的父元素设置 .dropdown类，可以让菜单向下弹出。通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的）。 <!-- 下拉菜单(
阅读全文
摘要：Glyphicons 字体图标 1、所有可用的图标 进入https://v3.bootcss.com/components/ 查看对应的图标。 2、图标的用法 2.1 单独使用 <!-- 图标 基本用法 --> <span class="glyphicon glyphicon-user"></spa
阅读全文
摘要：图片 1、响应式图片 在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。
阅读全文
摘要：按钮 1、可作为按钮使用的标签或元素 为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。 <!-- 可作为按钮使用的标签或元素 --> <a class="btn btn-default" href="#" role
阅读全文
摘要：表单 1、基本实例 单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获
阅读全文
摘要：表格 1、基本表格 为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。
阅读全文
摘要：代码 1、内联代码 通过 <code> 标签包裹内联样式的代码片段。 For example, <code><section></code> should be wrapped as inline. 2、用户输入 通过 <kbd> 标签标记用户通过键盘输入的内容。 To switch d
阅读全文
摘要：排版 1、标题 HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。 <h4>标题</h4> <!-- 常规标题 --> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题<
阅读全文
摘要：栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。 1、简介 栅格系统用于通过一系列的行（row）与列（column）的组合来创
阅读全文
摘要：1、HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。 <!doctype html> <html lang="en"> ... </html> 2、移动设备优先 为了确保适当
阅读全文
摘要：一、下载Bootstrap Bootstrap （当前版本 v3.4.1）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。 1、BootstrapCDN 通过cdn直接引入bootstrap的css和js核心文件（同时还需要引入jquery核心js文件，因为bo
阅读全文
摘要：一、表单校验 二、代码实例 1、自定义样式（Custom styles） <form class="row g-3 needs-validation" novalidate> <div class="col-md-4"> <label for="validationCustom01" class="
阅读全文
摘要：一、表单的布局 二、代码实例 1、表单网格（Form grid） <div class="row"> <div class="col"> <input type="text" class="form-control" placeholder="First name" aria-label="Firs
阅读全文
浙公网安备 33010602011771号