2021年9月28日
Bootstrap-v3-组件-面板
摘要： 面板 虽然不总是必须，但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况，可以试试面板组件。 1、基本面板 默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。 <!-- 面板 --> <!-- 基本面板 --> <div cla 阅读全文
posted @ 2021-09-28 16:24 AnnLing 阅读(185) 评论(0) 推荐(0) 编辑
Bootstrap-v3-组件-列表组
摘要： 列表组 列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容。 1、基本列表组 最简单的列表组仅仅是一个带有多个列表条目的无序列表，另外还需要设置适当的类。我们提供了一些预定义的样式，你可以根据自身的需求通过 CSS 自己定制。 <!-- 列表组 --> <ul clas 阅读全文
posted @ 2021-09-28 16:03 AnnLing 阅读(221) 评论(0) 推荐(0) 编辑
Bootstrap-v3-组件-媒体对象
摘要： 媒体对象 这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。 1、默认样式 默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。 1.1 在内容块的左边添加图片 <!-- 默认样式 阅读全文
posted @ 2021-09-28 15:47 AnnLing 阅读(80) 评论(0) 推荐(0) 编辑
Bootstrap-v3-组件-进度条
摘要： 进度条 通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈。 1、默认样式进度条 <!-- 默认样式进度条 --> <div class="progress"> <div class="progress-bar" aria-valuenow="60" aria-valuemin="0" a 阅读全文
posted @ 2021-09-28 15:16 AnnLing 阅读(122) 评论(0) 推荐(0) 编辑
Bootstrap-v3-组件-警告框
摘要： 警告框 警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息。 1、默认的警告框 将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert 类是必须要设置的，另外我们还提供了有特殊意义的4个类（例如，.alert-success），代表不同的警告信息。 警告框没有默认 阅读全文
posted @ 2021-09-28 14:55 AnnLing 阅读(289) 评论(0) 推荐(0) 编辑
Bootstrap-v3-组件-缩略图
摘要： 缩略图 通过缩略图组件扩展 Bootstrap 的 栅格系统，可以很容易地以网格的方式展示图像、视频、文本等内容。 如果你想实现一个类似 Pinterest 的页面效果（不同高度和/宽度的缩略图顺序排列）的话，你需要使用一个第三方插件，比如 Masonry、Isotope 或 Salvattore。 阅读全文
posted @ 2021-09-28 14:45 AnnLing 阅读(171) 评论(0) 推荐(0) 编辑
Bootstrap-v3-组件-页头
摘要： 页头 页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果，还支持大部分其他组件（需要增加一些额外的样式）。 <div class="page-header"> <h1>Example page header <small 阅读全文
posted @ 2021-09-28 14:25 AnnLing 阅读(59) 评论(0) 推荐(0) 编辑
Bootstrap-v3-组件-巨幕
摘要： 巨幕 这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容。 1、实例 如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，请把此组件放在所有 .container 元素的外面，并在组件内部添加一个 .container 元素。 <!-- 巨幕 --> <div class=" 阅读全文
posted @ 2021-09-28 14:22 AnnLing 阅读(130) 评论(0) 推荐(0) 编辑
Bootstrap-v3-组件-徽章
摘要： 徽章 给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目。 1、实例 在链接/按钮上显示徽章。 <!-- 徽章 --> <!-- 链接中展示徽章 --> <a href="#">未读消息 <span class="badge">20</spa 阅读全文
posted @ 2021-09-28 12:00 AnnLing 阅读(52) 评论(0) 推荐(0) 编辑
Bootstrap-v3-组件-标签
摘要： 标签 1、实例 实用类label和标签外观的类（例如：label-default）来设置标签显示。 <!-- 标签 --> <h3>Example heading <span class="label label-default">New</span></h3> <h6>最新的新闻做菜的方法全在这里 阅读全文
posted @ 2021-09-28 11:52 AnnLing 阅读(75) 评论(0) 推荐(0) 编辑
Bootstrap-v3-组件-分页
摘要： 分页 1、默认分页 受 Rdio 的启发，我们提供了这个简单的分页组件，用在应用或搜索结果中超级棒。组件中的每个部分都很大，优点是容易点击、易缩放、点击区域大。 <!-- 默认分页 --> <nav aria-label="Page navigation"> <ul class="paginatio 阅读全文
posted @ 2021-09-28 11:44 AnnLing 阅读(370) 评论(0) 推荐(0) 编辑
Bootstrap-v3-组件-路径导航
摘要： 路径导航 1、面包屑 <!-- 面包屑 --> <ol class="breadcrumb"> <li class="active">Home</li> </ol> <!-- 面包屑 --> <ol class="breadcrumb"> <li><a href="#">Home</a></li> 阅读全文
posted @ 2021-09-28 11:25 AnnLing 阅读(45) 评论(0) 推荐(0) 编辑
Bootstrap-v3-组件-导航条
摘要： 导航条 1、导航条的整体样式 1.1 导航条固定在顶部 添加 .navbar-fixed-top 类可以让导航条固定在顶部，还可包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）。 <nav class="navbar n 阅读全文
posted @ 2021-09-28 10:50 AnnLing 阅读(326) 评论(0) 推荐(0) 编辑