【Bootstrap 3之美07-插件Collapse、Accordion、Modal、Tab、Tooltip、Alert、Carousel】的更多相关文章

Bootstrap 3之美07-插件Collapse、Accordion、Modal、Tab、Tooltip、Alert、Carousel

类似Page Header, Breadcrumbs, Dropdowns等,都是Bootstrap的组件,是静态的.如果涉及到交互,Bootstrap提供了插件.这些插件包括: ○ 过渡效果: bootstrap-transition.js○ 模态对话框:bootstrap-modal.js○ 下拉项:bootstrap-dropdown.js...... 这些插件可以单独引入到页面.而在bootstrap.js或bootstrap.min.js文件中已经包含了所有的插件. 本篇主要包括: ■…

Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、用Button和Dropdowns模拟Select、Input Groups、Thumbnails、Panels、Wells

本篇主要包括: ■  Page Header■  Breadcrumbs■  Button Groups■  Dropdowns■  Button Dropdowns■  用Button和Dropdowns模拟Select■  Input Groups■  Thumbnails■  Panels■  Wells □ Page Header Page Header是指页面最顶部. <div class="page-header"> <h1>超级球迷</h1&…

Bootstrap 3之美05-排版、Button、Icon、Nav和NavBar、List、Table、Form

本篇主要包括: ■  排版■  Button■  Icon■  Nav和NavBar■  List■  Table■  Form 排版 ● 斜体:<em>● 加粗体:<strong>● 突出段落:class="lead"● 字体颜色:class="text-success",class="text-muted",class="text-success",class="text-primary&…

Bootstrap 3之美04-自定义CSS、Theme、Package

本篇主要包括: ■  自定义CSS■  自定义Theme■  自定义Package 自定义CSS 有时候,需要自定义或重写Bootstrap默认的CSS.→在css文件夹下创建一个site.css→假设要对container类重写,在site.css中 .container { background-color: #eee; } →把site.css引用到index.html中,并放置在bootstrap.min.cs的下方 <link href="css/bootstrap.min.cs…

Bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素

本篇主要包括: ■  添加独立的一行■  文字环绕■  图片自适应■  隐藏元素 添加独立的一行 在id为body的section和id为main的section之间,添加2张图片. 我们发现,新加的2张图片把主体内容挤到了右侧. 那么,我们如何处理新加的2张图片呢?--我们不太可能用container,因为它是页面布局层面的类名.但我们可以把这2张图片放在class名为row的div中. 我们还可以加更多的图片. 现在的图片还没有居中.考虑到总共有12个单元格,而4张图片只占了8个单元格,还空…

Bootstrap 3之美02-Grid简介和应用

本篇主要包括: ■  Grid简介■  应用Grid■  Multiple Grids Grid简介 Bootstrap中,把页面分成12等份,这就是所谓的Grid. 在Bootstrap中,用类名控制,这些类型遵循".col-xx-6"类似的形式. 2个6就占满整个页面.所以,类名最后面的数字表示要占几个格子. 又比如,3个4也占满整个页面. 又比如,4个3也占满整个页面. 又比如,6个2也占满整个页面. 另外,类似".col-xx-10 .col-xx-offset-2&…

Bootstrap 3之美01-下载并引入页面

本篇主要包括: ■ 下载Bootstrap 3■  Bootstrap 3引入页面 下载Bootstrap 3 →打开网站:http://getbootstrap.com/→点击屏幕中央位置的Download Bootstrap按钮→来到Bootstrap的下载页,有3个按钮可供选择:Download Bootstrap, Download source, Download Sass,本人选择"Download source"→下载后,解压缩,打开bootstrap-3.2.0文件夹…

Bootstrap学习第二天轮播插件

Bootstrap不仅提供了整套的样式,还提供了一系列插件,帮助开发者构建更受欢迎的网站. Bootstrap的轮播插件用起来很简单,代码如下. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> <meta name="view…

Bootstrap <基础三十二>模态框（Modal）插件

模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 modal.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 用法 您可以切换模态框(Modal)插件的隐藏内容: 通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggl…

自己写的基于bootstrap风格的弹框插件

自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTPARAMS = { width: 500, title: '提示消息', content: '', okbtn: '确定', cancelbtn: '取消', headerBackground: 'info', vbackdrop: 'static', //默认点击遮罩不会关闭modal vkeyb…