BootStrap
关注
分享
扫一扫
文章平均质量分 53
有梦的小草
自己很渺小，梦想、理想需要一滴滴去完成
展开
-
BootStrap 编码规范
黄金定律 不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。 -- 永远遵循同一套编码规范 -- 可以是这里列出的，也可以是你自己总结的。 HTML 语法 1.用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。 2. 嵌套元素应当缩进一次（即两个空格）。 3. 对于属性的定义，确保全部使用双引号，绝不要使用单引号。 ...原创 2019-01-06 22:24:58 · 501 阅读 · 0 评论 -
BootStrap-CSS样式_插件_附加导航（Affix）插件
附加导航（Affix）插件 附加导航（Affix）插件允许某个 <div> 固定在页面的某个位置。您也可以在打开或关闭使用 该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个 标记，该 <div> 会锁定在某个位置，不会随着页面其他部分一起滚动。 如果您想要单独引用该插件的功能，那么您需要引用 affix.js。或者，您可以引用 Bo...原创 2019-01-06 21:50:07 · 1651 阅读 · 0 评论 -
BootStrap-CSS样式_插件_轮播（Carousel）插件
轮播（Carousel）插件 Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内 容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。 如果您想要单独引用该插件的功能，那么您需要引用 carousel.js。或者，您可以引用 Bootstrap 插件， bootstrap.js 或压缩版的 bootstrap....原创 2019-01-06 21:20:42 · 2156 阅读 · 0 评论 -
BootStrap-CSS样式_插件_折叠（Collapse）插件
折叠（Collapse）插件 折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内 容面板，它都允许很多内容选项。 如果您想要单独引用该插件的功能，那么您需要引用 collapse.js。同时，也需要在您的 Bootstrap 版本中引用 Transition（过渡）插件。还可以引用 bootstrap.js 或压缩版的 bootstrap.min.j...原创 2019-01-05 00:51:47 · 1595 阅读 · 0 评论 -
BootStrap-CSS样式_插件_按钮（Button）插件（加载、状态、列队）
按钮（Button）插件通过按钮（Button）插件，您可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。 如果您想要单独引用该插件的功能，那么您需要引用 button.js。或者，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 加载状态如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loadin...原创 2019-01-04 00:40:25 · 1814 阅读 · 0 评论 -
BootStrap-CSS样式_插件_警告框（Alert）插件
警告框（Alert）插件警告框（Alert）消息大多是用来想终端用户显示诸如警告或确认消息的信息。使用警告框 （Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能。 如果您想要单独引用该插件的功能，那么您需要引用 alert.js。或者，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 用法您可以有以下两种方式启用警告框...原创 2019-01-03 23:12:21 · 1732 阅读 · 0 评论 -
BootStrap-CSS样式_插件_弹出框（Popover）插件
弹出框（Popover）插件 弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框， 用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。该方法依赖于工具提示（tooltip）。 如果您想要单独引用该插件的功能，那么您需要引用 popover.js，它依赖于 工具提示（...原创 2019-01-03 22:33:31 · 1193 阅读 · 0 评论 -
BootStrap-CSS样式_插件_工具提示（Tooltip）插件
工具提示（Tooltip）插件 当您想要描述一个链接的时候，工具提示（Tooltip）就显得非常有用。工具提示（Tooltip）插 件是受 Jason Frame 写的 jQuery.tipsy 的启发。工具提示（Tooltip）插件做了很多改进，例如不需 要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。 如果您想要单独引用该插件的功能，那么您需要引用 popo...原创 2019-01-03 21:34:05 · 1392 阅读 · 2 评论 -
BootStrap-CSS样式_插件_选项卡(Tab)插件
标签页（Tab）插件标签页（Tab）在 Bootstrap 导航元素 一章中介绍过。通过结合一些 data 属性，您可以轻松 地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下 拉菜单标签页中。 如果您想要单独引用该插件的功能，那么您需要引用 tab.js。或者，正如 Bootstrap 插件概览 一章 中所提到，您可以引用 bootstrap.js 或压缩版...原创 2019-01-02 23:59:54 · 2513 阅读 · 0 评论 -
BootStrap-CSS样式_插件_滚动监听（Scrollspy）插件
滚动监听（Scrollspy）插件滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航 目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。 如果您想要单独引用该插件的功能，那么您需要引用 scrollspy.js。或者，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。用...原创 2019-01-02 02:36:49 · 1110 阅读 · 0 评论 -
BootStrap-CSS样式_插件_模态框插件
模态框（Modal）插件 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容， 可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 提示：如果您想要单独引用该插件的功能，那么您需要引用 modal.js。或者，正如 Bootstrap 插件概览 一章中 所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。...原创 2019-01-01 14:30:15 · 622 阅读 · 0 评论 -
BootStrap-CSS样式_插件_插件概览(介绍)
Bootstrap 插件概览Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员，您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API（Bootstrap Data API），大部分的插件可以在不编写任何代码的情 况被触发。站点引用 Boot...原创 2018-12-31 01:38:41 · 524 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_字体图标(Glyphicons)
什么是字体图标？ 字体图标是在 Web 项目中使用的图标字体。虽然，Glyphicons Halflings 需要商业许可，但 是您可以通过基于项目的 Bootstrap 来免费使用这些图标。 获取字体图标我们下载了 Bootstrap 3.x 版本，并理解了它的目录结构。在 fonts 文件夹内可以找到字体图标， 它包含了下列这些文件：1.glyphicons-halflings-...原创 2018-12-31 00:27:51 · 2510 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_Well
Well1.Well是一种会引起内容凹陷显示或插图效果的容器 <div>2.创建 Well，只需要简单地把内 容放在带有 class .well 的 <div> 中即可尺寸大小使用可选类 well-lg 或 well-sm 来改变 Well 的尺寸大小。这两个类是与 .well 类结合使用 的。这两个类会影响内边距（padding），根据使用的类，Well 会...原创 2018-12-30 21:06:38 · 348 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_板面(盒子样式)
面板：组件用于把 DOM 组件插入到一个盒子中基本面板向 <div> 元素 添加 class .panel 和 class .panel-default 即可面板标题1.使用 .panel-heading class 可以很简单地向面板添加标题容器2.使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标...原创 2018-12-30 00:13:51 · 1103 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_列表组（列表徽章链接段落综合应用）
列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下：.list-group:向元素 <ul> 添加 class .list-group。.list-group-item:向 <li> 添加 class .list-group-item。.list-group-item-heading：列表组头部样式，应用在标题<h*>标签...原创 2018-12-28 00:29:05 · 769 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_多媒体对
多媒体对 Bootstrap 中的多媒体对象（Media Object）：这些抽象的对象样式用于创 建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者 右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的：.media：该 class 允许将媒体对象里的多媒体（图像、视...原创 2018-12-28 00:03:52 · 274 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_进度条
默认的进度条创建一个基本的进度条的步骤如下：1.添加一个带有 class .progress 的 <div>。2.接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。3.添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。状态的进度条...原创 2018-12-27 23:38:16 · 403 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_警告（Alerts）
基本警告：通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class （即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本 的警告框可取消的警告:1.同时向上面的 <div> class 添加可选的 .alert-dismissable 2...原创 2018-12-27 22:57:19 · 929 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_缩略图
Bootstrap 缩略图大多数站点都需要在网格中布局图像、视频、文本等。 Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下：1.在图像周围添加带有 class .thumbnail 的 <a> 标签。2.这会添加四个像素的内边距（padding）和一个灰色的边框。 3.当鼠标悬停在图像上时，会动画显示出图像的轮廓。...原创 2018-12-27 22:30:16 · 490 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_超大屏幕页面标题
超大屏幕（Jumbotron） 步骤如下：1. 创建一个带有 class .jumbotron. 的容器 <div>。2. 除了更大的 <h1>，字体粗细 font-weight 被减为 200px。页面标题（page-header）页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。如 需使用页面标题（Page Header）...原创 2018-12-27 22:07:50 · 1000 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_徽章（消息提示）
Bootstrap 徽章（Badges）：徽章与标签相似，主要的区别在于徽章的边角更加 圆滑。徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可span标签+.badge样式：设置徽章，例如：<span class="badge">50</...原创 2018-12-20 23:28:09 · 1081 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_标签
Bootstrap 标签：标签可用于计数、提示或页面上其他的标记显示，使用 class .label 来显示标签label：标签，在不同容器中显示不同大小label-default：默认标签label-primary：主要标签label-success：成功标签label-info：信息标签label-warning：警告标签abel-danger：危险标签代码实例...原创 2018-12-20 23:10:54 · 979 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_分页翻页
Bootstrap 支持的分页特性pagination样式：添加该 class 来在页面上显示分页active样式：默认选中，指示当前的页面disbaled样式：定义不可点击的链接Pager样式：添加该 class 来获得翻页链接previous样式： 把链接向左对齐next样式： 把链接向右对齐。pull-left样式：左浮动pagination-lg样式：外观大...原创 2018-12-20 22:52:16 · 2225 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_固定导航栏(顶部底部静态面包屑导航)
固定导航栏Bootstrap 导航栏可以动态定位。默认情况下，它是块级元素，它是基于在 HTML 中放置的 位置定位的。通过一些帮助器类，您可以把它放置在页面的顶部或者底部，或者您可以让它成为 随着页面一起滚动的静态导航栏。为了防止导航栏与页面主体中的其他内容的顶部相交错，请向 <body> 标签添加至少 50 像 素的内边距（padding），内边距的值可以根据您的需要进行设置。...原创 2018-12-19 23:41:35 · 5077 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_导航栏中的(表单按钮文本链接对齐方式)
导航栏中的表单使 用 .navbar-form class。这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。使用对齐方 式选项来决定导航栏中的内容放置在哪里。导航栏中的按钮使用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按钮，按钮在导航栏上 垂直居中。.navbar-btn 可被使用在 <a> 和...原创 2018-12-19 23:23:58 · 1092 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_响应式导航栏(移动设备折叠随宽度增加展开)
导航栏导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视图宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式 默认的导航栏创建一个默认的导航栏的步骤如下：1、向 <nav> 标签添加 class ....原创 2018-12-18 23:59:11 · 2407 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_导航元素(导航或标签（Tab页）)
导航元素所涉及样式：nav-tabs样式：呈现表格导航或标签（Tab页）样式nav-pills样式：呈现胶囊式导航菜单（Tab页）样式nav-stacked样式：水平导航设置为堆叠(垂直)效果disabled样式：呈现禁用的导航菜单样式,在li标签中使用active样式：呈现点击激活的样式，在li标签中使用data-toggle="dropdown"属性：绑定下拉菜单d...原创 2018-12-13 23:44:06 · 1519 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_按钮组(单一组、工具栏、大小、嵌套、垂直)
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta原创 2018-12-13 21:45:24 · 614 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_按钮菜单组件(下拉框上拉框)
菜单按钮涉及样式属性:1. 基本菜单divider样式：显示下划线效果2.设置菜单文字对齐text-right样式：右对齐text-center:居中text-left(默认)：左对齐3.带标题的菜单dropdown-header样式：设置标题样式，并且鼠标不可点击disabled样式：显示禁用标识和效果，但点击还是能够触发事件的，需要配合JS来实现彻底的禁用...原创 2018-12-13 20:38:59 · 1619 阅读 · 0 评论 -
BootStrap-CSS样式_排版_响应式布局(各种大中小超小设备和打印机显示隐藏样式)
响应实用工具目前只适用于块或表切换大中小超小设备显示隐藏类 打印类 大中小超小设备综合实例：<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatibl原创 2018-12-02 01:00:51 · 1140 阅读 · 0 评论 -
BootStrap-CSS样式_排版_辅助类(颜色浮动居中显示隐藏转义字符)
CSS样式辅助类:pull-left样式:左浮动pull-right样式:右浮动center-block样式：设置居中，单纯看上去是没有没居中的，因为块宽度默认100%，只不过块内文字没有居中，需要单独设置style="text-align:center":设置文本居中clearfix样式：清除浮动，即清除之前块设置的浮动sr-only样式：除屏幕阅读器，其他设备上隐藏元素...原创 2018-12-01 23:58:33 · 947 阅读 · 0 评论 -
BootStrap-CSS样式_排版_图片
图片img类：img-rounded样式：为图片添加圆角(IE8不支持)img-circle样式： 将图片变为椭圆形(IE8不支持)img-thumbnail样式：将图片变为略缩图img-responsive样式：让图片支持响应式，将很好地扩展到父元素 (通过改变窗口大小查看效果)<!DOCTYPE html><html lang="zh-cn">...原创 2018-12-01 22:32:42 · 1066 阅读 · 0 评论 -
BootStrap-CSS样式_排版_表单、表单控件
1. 基本表单form样式：默认不显示，基本表单form-group样式：表单内设置分组form-control样式：设置控件并绑定控件默认样式2. 内联表单form-inline样式：设置为内联排列表单3. 水平排列表单form-horizontal样式：设置为水平排列表单4. 表单支持控件type="text"：文本框textarea标签：多行文本框...原创 2018-12-01 19:09:41 · 2228 阅读 · 0 评论 -
BootStrap-CSS样式_排版_按钮
BootStrap按钮样式、类型、代码、显示效果按钮最好使用button类型的，以免垮浏览器或一些其他操作存在兼容性问题。1. 选项按钮btn btn-default样式：渐变标准灰色，默认按钮btn btn-primary样式：蓝色，提供额外的视觉感，可在一系列按钮中指出主要操作btn btn-success样式：浅蓝色，可作为默认样式的代替样式btn btn-info样...原创 2018-12-01 02:39:53 · 3489 阅读 · 0 评论 -
BootStrap-CSS样式_排版_表格
table样式:基本表格table table-striped样式:条纹表格，类似奇数偶数行table table-bordered样式:带边框表格，添加表边框table table-hover样式:鼠标悬停效果表格，添加鼠标移入移出事件样式table table-condensed样式:紧缩型表格，缩小表内边距(padding减半)table active-激活状态(灰色) ...原创 2018-12-01 01:49:27 · 707 阅读 · 0 评论 -
BootStrap-CSS样式_排版_代码
code标签：标注代码块，标签内包裹内联样式的代码片段，呈现背景粉红色块pre标签：基本代码块，多行代码可以使用pre标签pre-scrollable样式：增加一个高度max-height:350px滚动条，当高度超过350px就可以上下滚动了&lt;&gt;：为"<"">"转义字符<!DOCTYPE html><html lang...原创 2018-12-01 00:15:37 · 327 阅读 · 0 评论 -
BootStrap-CSS样式_排版_列表
container样式：给内容给添加引用模块，内容一侧出现纵线CSS效果，一般用于给段落P设置诗词效果list-unstyled样式：生成无样式列表list-inline样式：生成内联列表，英语单词inline：内联dl-horizontal样式：使描述客户端页面全屏dt、dd在一行显示，页面列缩小后dt、dd在一列显示<!DOCTYPE html><html...原创 2018-11-30 23:33:20 · 309 阅读 · 0 评论 -
BootStrap-CSS样式_排版_地址
格式：<address></address>标签呈现效果：自动出现上下边距<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-原创 2018-09-19 22:22:06 · 370 阅读 · 0 评论 -
BootStrap-CSS样式_排版_缩略语
略缩语格式：<abbr title="" class="initialism"></abbr>title：提示所设置略缩语initialism：汉子可以将其font-size设置的更小些，英文font-size设置的更大一些，更加突出强调<!DOCTYPE html><html lang="zh-cn"><原创 2018-09-19 22:00:01 · 455 阅读 · 0 评论