2017年06月_黄巧克力

06月 05月 04月 03月 02月

原创 bootstrap学习32---滚动监听scrollspy.js

scrollspydata属性调用方式data-spy=”scroll” data-target=”#navbar-example”这两个属性应用在body上可以使整个页面去响应滚动的监听。js调用方式$(‘body’).scrollspy({ target: ‘#navbar-example’ });.scrollspy(‘refresh’)当使用滚动监听插件的同时在 DOM 中添加或删除元

2017-06-16 09:43:02 478

原创 bootstrap学习31---dropdown.js

用法首先感谢bootstrap中文网的翻译人员的辛苦劳动，没有这个中文网站，我对于bootstrap的理解不可能这么快，不过看得出bootstrap中文网的工作人员可能不止这一件事情在做，因为从dropdown.js开始，就全是中文，可以理解，向你们致敬，不过还是希望早一点翻译完全。根据前面modal框的学习，可以猜测dropdown的用法基本思路是不变的，data属性 API和js并行。首先 d

2017-06-15 14:10:15 791

原创 bootstrap学习30--javascript插件--modal dialog

可选大小通过对 modal-dialog样式后面追加 .modal-lg 或者 .modal-sm 样式来实现模态框的大小调整基本格式<div class="modal" id="myDialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class

2017-06-14 08:26:07 1007

原创 bootstrap学习29---javascript插件之引用的注意事项

引用单个js文件还是整个文件？如果遇到不需要的部分，可以定制bootstrap文件data属性你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API，也应该是你的首选方式。你也可以通过下面的语句关闭data属性API $(document).off(‘.data-api’);或者正对于某

2017-06-13 11:01:27 399

原创 bootstrap学习28-well效果

.well 样式呈现一种简单的内嵌样式可选尺寸.well-lg 大号 .well-sm 小号

2017-06-09 09:58:02 407

原创 bootstrap学习27---带有响应式特性的嵌入式内容

响应式特性说明根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定视频或 slideshow 的尺寸，能够在各种设备上缩放。这些规则被直接应用在 <iframe>、<embed>、<video> 和 <object> 元素上。如果你希望让最终样式与其他属性相匹配，还可以明确地使用一个派生出来的 .embed-responsive-item 类。超级提示：不需要为 <ifra

2017-06-09 09:52:51 668

原创 bootstrap学习27---面板

基本示例.panel 类属于基础类 .panel-defualt类默认修饰样式带标题的面板.panel-heading .panel-title脚注.panel-footer情景样式info success warning danger带表格的面板如果在面板中添加 .table 可以嵌入表格为面板中不需要边框的表格添加 .table 类，是整个面板看上去更像是一个整体设计。如果是带有 .

2017-06-09 09:42:45 221

原创 bootstrap学习25---列表组

主要应用在ul list-group 主框架 list-group-item 元素元素中间可以修饰 span badge 徽章也可以应用在 a 标签中 button 也可以直接当做列表项元素使用不用包裹其他元素，中文网上list-group只能用DIV，好像ul也可以（可以展现样式）。

2017-06-08 09:00:29 266

原创 bootstrap学习24---媒体对象

media类 media-left media-body media-right列表也可以处理成媒体对象

2017-06-06 15:35:19 299

原创 bootstrap学习23---进度条

class="progress" 提供一个基本的进度条框架中间嵌套div class=“progress-bar ” 设定 style="width:35%"情景效果 .success .inof .warning .danger 动画效果 .active堆叠效果就是可以几个不同的progress-bar 可以拼接。

2017-06-06 14:45:40 444

原创 bootstrap学习21---警告框

.alert类必须设置但是不提供默认类必须紧跟特色类 info danger warning success 可关闭的警告框 .alert-dismissible 要配合按钮使用,button添加data-dismiss="alert"属性，<button >才能正常关闭.class类能够将按钮修饰成指定样式警告框中的链接

2017-06-06 14:22:42 257