BootStrap
文章平均质量分 53
有梦的小草
自己很渺小,梦想、理想需要一滴滴去完成
展开
-
BootStrap-CSS样式_插件_选项卡(Tab)插件
标签页(Tab)插件标签页(Tab)在 Bootstrap 导航元素 一章中介绍过。通过结合一些 data 属性,您可以轻松 地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下 拉菜单标签页中。 如果您想要单独引用该插件的功能,那么您需要引用 tab.js。或者,正如 Bootstrap 插件概览 一章 中所提到,您可以引用 bootstrap.js 或压缩版...原创 2019-01-02 23:59:54 · 2451 阅读 · 0 评论 -
BootStrap-CSS样式_插件_工具提示(Tooltip)插件
工具提示(Tooltip)插件 当您想要描述一个链接的时候,工具提示(Tooltip)就显得非常有用。工具提示(Tooltip)插 件是受 Jason Frame 写的 jQuery.tipsy 的启发。工具提示(Tooltip)插件做了很多改进,例如不需 要依赖图像,而是改用 CSS 实现动画效果,用 data 属性存储标题信息。 如果您想要单独引用该插件的功能,那么您需要引用 popo...原创 2019-01-03 21:34:05 · 1323 阅读 · 2 评论 -
BootStrap-CSS样式_布局组件_响应式导航栏(移动设备折叠随宽度增加展开)
导航栏导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的,随着可用视图宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式 默认的导航栏创建一个默认的导航栏的步骤如下:1、向 <nav> 标签添加 class ....原创 2018-12-18 23:59:11 · 2284 阅读 · 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 · 735 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_多媒体对
多媒体对 Bootstrap 中的多媒体对象(Media Object):这些抽象的对象样式用于创 建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者 右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的:.media:该 class 允许将媒体对象里的多媒体(图像、视...原创 2018-12-28 00:03:52 · 249 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_进度条
默认的进度条创建一个基本的进度条的步骤如下:1.添加一个带有 class .progress 的 <div>。2.接着,在上面的 <div> 内,添加一个带有 class .progress-bar 的空的 <div>。3.添加一个带有百分比表示的宽度的 style 属性,例如 style="60%"; 表示进度条在 60% 的位置。状态的进度条...原创 2018-12-27 23:38:16 · 351 阅读 · 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 · 853 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_缩略图
Bootstrap 缩略图大多数站点都需要在网格中布局图像、视频、文本等。 Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下:1.在图像周围添加带有 class .thumbnail 的 <a> 标签。2.这会添加四个像素的内边距(padding)和一个灰色的边框。 3.当鼠标悬停在图像上时,会动画显示出图像的轮廓。...原创 2018-12-27 22:30:16 · 451 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_超大屏幕页面标题
超大屏幕(Jumbotron) 步骤如下:1. 创建一个带有 class .jumbotron. 的容器 <div>。2. 除了更大的 <h1>,字体粗细 font-weight 被减为 200px。页面标题(page-header)页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用。如 需使用页面标题(Page Header)...原创 2018-12-27 22:07:50 · 899 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_徽章(消息提示)
Bootstrap 徽章(Badges):徽章与标签相似,主要的区别在于徽章的边角更加 圆滑。徽章(Badges)主要用于突出显示新的或未读的项。如需使用徽章,只需要把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可span标签+.badge样式:设置徽章,例如:<span class="badge">50</...原创 2018-12-20 23:28:09 · 1027 阅读 · 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 · 865 阅读 · 0 评论 -
BootStrap-CSS样式_插件_弹出框(Popover)插件
弹出框(Popover)插件 弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图。如需激活弹出框, 用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充。该方法依赖于工具提示(tooltip)。 如果您想要单独引用该插件的功能,那么您需要引用 popover.js,它依赖于 工具提示(...原创 2019-01-03 22:33:31 · 1139 阅读 · 0 评论 -
BootStrap-CSS样式_插件_警告框(Alert)插件
警告框(Alert)插件警告框(Alert)消息大多是用来想终端用户显示诸如警告或确认消息的信息。使用警告框 (Alert)插件,您可以向所有的警告框消息添加可取消(dismiss)功能。 如果您想要单独引用该插件的功能,那么您需要引用 alert.js。或者,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 用法您可以有以下两种方式启用警告框...原创 2019-01-03 23:12:21 · 1664 阅读 · 0 评论 -
BootStrap-CSS样式_插件_按钮(Button)插件(加载、状态、列队)
按钮(Button)插件通过按钮(Button)插件,您可以添加进一些交互,比如控制按钮状态,或者为其他组件(如工具栏)创建按钮组。 如果您想要单独引用该插件的功能,那么您需要引用 button.js。或者,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 加载状态如需向按钮添加加载状态,只需要简单地向 button 元素添加 data-loadin...原创 2019-01-04 00:40:25 · 1743 阅读 · 0 评论 -
BootStrap 编码规范
黄金定律 不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的。 -- 永远遵循同一套编码规范 -- 可以是这里列出的,也可以是你自己总结的。 HTML 语法 1.用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。 2. 嵌套元素应当缩进一次(即两个空格)。 3. 对于属性的定义,确保全部使用双引号,绝不要使用单引号。 ...原创 2019-01-06 22:24:58 · 449 阅读 · 0 评论 -
BootStrap-CSS样式_插件_附加导航(Affix)插件
附加导航(Affix)插件 附加导航(Affix)插件允许某个 <div> 固定在页面的某个位置。您也可以在打开或关闭使用 该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始,但当页面点击某个 标记,该 <div> 会锁定在某个位置,不会随着页面其他部分一起滚动。 如果您想要单独引用该插件的功能,那么您需要引用 affix.js。或者,您可以引用 Bo...原创 2019-01-06 21:50:07 · 1598 阅读 · 0 评论 -
BootStrap-CSS样式_插件_轮播(Carousel)插件
轮播(Carousel)插件 Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内 容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。 如果您想要单独引用该插件的功能,那么您需要引用 carousel.js。或者,您可以引用 Bootstrap 插件, bootstrap.js 或压缩版的 bootstrap....原创 2019-01-06 21:20:42 · 2056 阅读 · 0 评论 -
BootStrap-CSS样式_插件_滚动监听(Scrollspy)插件
滚动监听(Scrollspy)插件滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航 目标。其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class。 如果您想要单独引用该插件的功能,那么您需要引用 scrollspy.js。或者,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。用...原创 2019-01-02 02:36:49 · 1063 阅读 · 0 评论 -
BootStrap-CSS样式_插件_模态框插件
模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容, 可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 提示:如果您想要单独引用该插件的功能,那么您需要引用 modal.js。或者,正如 Bootstrap 插件概览 一章中 所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。...原创 2019-01-01 14:30:15 · 553 阅读 · 0 评论 -
BootStrap-CSS样式_插件_折叠(Collapse)插件
折叠(Collapse)插件 折叠(Collapse)插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内 容面板,它都允许很多内容选项。 如果您想要单独引用该插件的功能,那么您需要引用 collapse.js。同时,也需要在您的 Bootstrap 版本中引用 Transition(过渡)插件。还可以引用 bootstrap.js 或压缩版的 bootstrap.min.j...原创 2019-01-05 00:51:47 · 1499 阅读 · 0 评论 -
BootStrap-CSS样式_插件_插件概览(介绍)
Bootstrap 插件概览Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员,您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API(Bootstrap Data API),大部分的插件可以在不编写任何代码的情 况被触发。站点引用 Boot...原创 2018-12-31 01:38:41 · 473 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_字体图标(Glyphicons)
什么是字体图标? 字体图标是在 Web 项目中使用的图标字体。虽然,Glyphicons Halflings 需要商业许可,但 是您可以通过基于项目的 Bootstrap 来免费使用这些图标。 获取字体图标我们下载了 Bootstrap 3.x 版本,并理解了它的目录结构。在 fonts 文件夹内可以找到字体图标, 它包含了下列这些文件:1.glyphicons-halflings-...原创 2018-12-31 00:27:51 · 2281 阅读 · 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 · 317 阅读 · 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 · 1029 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_分页翻页
Bootstrap 支持的分页特性pagination样式:添加该 class 来在页面上显示分页active样式:默认选中,指示当前的页面disbaled样式:定义不可点击的链接Pager样式:添加该 class 来获得翻页链接previous样式: 把链接向左对齐next样式: 把链接向右对齐。pull-left样式:左浮动pagination-lg样式:外观大...原创 2018-12-20 22:52:16 · 2177 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_固定导航栏(顶部底部静态面包屑导航)
固定导航栏Bootstrap 导航栏可以动态定位。默认情况下,它是块级元素,它是基于在 HTML 中放置的 位置定位的。通过一些帮助器类,您可以把它放置在页面的顶部或者底部,或者您可以让它成为 随着页面一起滚动的静态导航栏。为了防止导航栏与页面主体中的其他内容的顶部相交错,请向 <body> 标签添加至少 50 像 素的内边距(padding),内边距的值可以根据您的需要进行设置。...原创 2018-12-19 23:41:35 · 4970 阅读 · 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 · 429 阅读 · 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-09-19 20:13:45 · 5118 阅读 · 0 评论 -
BootStrap-CSS样式_排版_页面主体(段落中字体和页边距设置)
page-header:设置段落和页边距lead:突出显示设置的段落(相当于字体的放大加粗效果) <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatibl原创 2018-09-18 23:04:41 · 1569 阅读 · 0 评论 -
BootSrtap-CSS样式_排版_标题(副标题)
<!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met原创 2018-09-18 22:50:05 · 4191 阅读 · 0 评论 -
BootStrap-栅格布局_列排序
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <me原创 2018-09-18 22:35:20 · 1103 阅读 · 0 评论 -
BootStrap-栅格布局_列嵌套
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <me原创 2018-09-18 22:14:30 · 1333 阅读 · 0 评论 -
BootStrap-栅格布局_列偏移(相当于CSS的margin效果)
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta原创 2018-09-18 21:55:59 · 2967 阅读 · 0 评论 -
BottStrap-栅格布局_超过12的column的排列(超过部分另起一行排列)
<!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met原创 2018-09-18 21:45:21 · 1382 阅读 · 0 评论 -
BootStrap-栅格布局_移动设备和桌面屏幕
<!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met原创 2018-09-18 21:38:06 · 1063 阅读 · 0 评论 -
BootStrap-栅格布局_流式布局容器
<!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met原创 2018-09-18 21:36:23 · 1254 阅读 · 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 · 350 阅读 · 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 · 275 阅读 · 0 评论 -
BootStrap-CSS样式_排版_代码
code标签:标注代码块,标签内包裹内联样式的代码片段,呈现背景粉红色块pre标签:基本代码块,多行代码可以使用pre标签pre-scrollable样式:增加一个高度max-height:350px滚动条,当高度超过350px就可以上下滚动了&lt;&gt;:为"<"">"转义字符<!DOCTYPE html><html lang...原创 2018-12-01 00:15:37 · 279 阅读 · 0 评论 -
BootStrap-CSS样式_布局组件_导航栏中的(表单按钮文本链接对齐方式)
导航栏中的表单使 用 .navbar-form class。这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。使用对齐方 式选项来决定导航栏中的内容放置在哪里。导航栏中的按钮使用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按钮,按钮在导航栏上 垂直居中。.navbar-btn 可被使用在 <a> 和...原创 2018-12-19 23:23:58 · 1040 阅读 · 0 评论