Waterfox Blog

一生想做浪漫极客

badges提醒微章

"badges提醒微章"

<span class=”badge” <a href="#">Mailbox <span class="badge">50</span></a> 为导航添加 微章事件. 其实就是<span标签添加a标签 <h4>胶囊式导航中的激活状态</h4> <ul class="nav nav-pills...

bootstrap-Scrollspy滚动插件

"bootstrap-Scrollspy滚动插件"

用法 通过 data 属性:向您想要监听的元素(通常是 body)添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作,您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。 ``` ... ... ... 或者 $(‘body’).sc...

bootstrap-well插图效果

"bootstrap-well插图效果"

使用a标签data-toggle和同级div[class=”modal和id进行动作绑定 //添加事件绑定data-toggle和执行对象者的href <div class="modal fade" id="modal-id" tabindex="-1"> //.fade淡入淡出效果. tabindex=-1没有意义,但是可以给model添加默认的esc事件绑定 ...

bootstrap-well插图效果

"bootstrap-well插图效果"

Bootstrap 自带 12 种 jQuery 插件,大部分的插件可以在不编写任何代码的情况被触发。引用方式:使用 bootstrap.js 调用方式.data-api 关闭事件 $(document).off('.data-api') 关闭警告事件 $(document).off('.alert.data-api') 链式编程 // 初始化为默认行为 $("#myModal")....

bootstrap-well插图效果

"bootstrap-well插图效果"

.well 创建内边距和外边距和边框 .well-lg 创建更大的内边距和外边距和边框 .well-sm 创建更小的内边距和外边距和边框 <div class="well well-lg">您好,我在大的 Well 中!</div> <div class="well well-sm">您好,我在小的 Well 中!</div>

bootstrap-panels面板

"bootstrap-panels面板"

div .panel 面板标记 div .panel-default 默认面板样式 div .panel-heading 面板标题样式 h3 .panel-title 面板标题文字样式 <div class="panel panel-default"> <div class="panel-heading"> <h3 class="pa...

bootstrap-Alerts

"bootstrap-Alerts"

.media和.media-list都是可以通过media定义不规则的展示内容 <div class="media". //定义多媒体范围 <a class="media-left" //定义多媒体定位是左边还是右边 <img class="media-object" //多媒体承载体 </a> <di...

bootstrap-listGroup

"bootstrap-listGroup"

.list-group 标记区域 .list-group-item 标记列表样式 这两个样式支持ul和li,div和a list-group-item-heading 标题 list-group-item-text 文字 ul和li添加下拉并且支持微章 <ul class="list-group"> <li class="list-group-...

bootstrap-杂

"bootstrap-杂"

超大屏幕,缩小周围边距jumbotron 除了更大的 <h1>,字体粗细 font-weight 被减为 200。 ``` ``` 也可以。可以获得更大的屏幕空间 ``` ``` ## 页面标题page-header ``` 页面标题实例 子标题 ``` ## 缩略图thumbnail。制作有边距的画框...

bootstrap-Alerts

"bootstrap-Alerts"

.alert-success、 .alert-info、 .alert-warning、 .alert-danger .alert-dismissable 关闭的按钮 <div class="alert alert-success alert-dismissable"> <button type="button" class="close" data-dismis...