1. 首页
  2. pdf
  3. 开发语言与工具

bootstrap 入门教程


本作品由 VentLam 创作，采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。 BootStrap 入门教程 (一) 2011年，twitter 的“一小撮”工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建 了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap 由 MARK OTTO 和 Jacob Thornton 所 设计和建立，在 github 上开源之后，迅速成为该站上最多人 watch&fork 的项目。大量工程师踊跃为该项目贡 献代码，社区惊人地活跃，代码版本进化非常快速，官方文档质量极其高(可以说是优雅)，同时涌现了许多基 于 Bootstrap 建设的网站：界面清新、简洁;要素排版利落大方。如下图所示： https://kippt.com/ http://www.fleetio.co m/ GitHub 上这样介绍 bootstrap：简单灵活可用于架构流行的用户界面和交互接口的 html,css,javascript 工具 集。基于 html5、css3的 bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12 列格网，样式向导文档，自定义 JQuery 插件，完整的类库，基于 Less 等。本系列教程遵循官方文档结构来介 绍 bootstrap，包括手脚架（Scaffolding),基础 CSS,组件,javascript 插件，使用 LESS 与自定义.本文主要介绍 Boo tstrap 的基础布局--Scaffolding. Bootstrap 建立了一个响应式的12列格网布局系统，它引入了 fixed 和 fluid-with 两种布局方式。我们从 全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts), 响应式设计(Responsive Design)这六五个方面深入讲解 Boostrap 的 scaffolding.  全局样式(Global Style).Bootstrap 要求 html5的文件类型，所以必须在每个使用 bootstrap 页面的开头 都引用: ...  同时，它通过 Bootstrap.less 文件来设置全局的排版和连接显示风格.其中去掉了 Body 的 margin，使用 @baseFontFamily,@baseFontSize,@linkColor 等变量来控制基本排版。  格网系统(Grid System).默认的 Bootstrap 格网系统提供一个宽达940像素的,12列的格网。这意味着你 页面默认宽度是940px,最小的单元要素宽度是940/12px.Bootstrap 能够使得你的网页可以更好地适应多种终 端设备( 平板电脑，智能手机等)。默认格网系统直观概念如图1 - 1 所示： 图1-1 默认格网系统(Default G rid System) 以下简单的代 码则是实现图1-1中，第三列的宽度为4和宽度为8的两个 div. ...
...
2.2 偏移列. 有时候，页面要素前面需要一些空白，bootstrap 提供了偏移列来实现，如图1-2所示： 图1-２ 偏移列(Offset co lumns) 以下代码实现了是实现图1-2中，第一列的宽度为4和偏移度为4宽度为4的两个 div. ...
... 2.3 嵌套列. 嵌套列是容许用户实现更复杂的页面要素布局。在 bootstrap 中实现嵌套列非常简单，只需要在原 有的 div 中加入.row 和相应的长度的 span* div 即可。 如图1-3所示： 图1-3 嵌套列(Nesting columns) 以下代码实现了是实现图1-3中，第一层的宽度为12和第二层两个宽度为6的两个 div. Level 1 of column Level 2 Level 2 嵌套的 div 长度之和不能大于它的父 div，否则会溢出叠加。各位可以试试将第一层的 div 长度改为其他值，看 看效果。  流式格网系统(Fluid grid system).它使用%，而不是固定的 px,来确定页面要素的宽度.只需要简单的将. row 改成.row-fluid ，就可以将 fixed 行改为 fluid.如图1-4所示： 图1-4 流式格网系统(Fluid grid system) 以下代码实现了是实现图1-4中，两个不同长度的流式页面 要素. ... ... 嵌套的流式格网和嵌套的固定格网，稍微有些不同。嵌套流式格网(Fluid nesting)的子要素不用匹配父要素的 宽度，子要素用100%来表示占满父要素的页面宽度。 自定义格网(Grid cu stomization).Bootstra p允许通过修改variab les.less 的参数值来自 定义格网系统。主要 包括如表1-1所示的 变量： 变量 默认值 说明 @gridColumns 12 列数 @gridColumnWidth 60px 每列的宽度 @gridGutterWidth 20px 列间距 表1-1 格网变量 我们通过修改以上值，并重新编译 B ootstrap 来实现自定义格网系统。如果添加新的列，需要同时修改 grid.less.同样的,需要修改 responsive.less 来获 得多设备兼容.  布局(Layout).本文最后我们讨论创建页面基础模板的布局。如前面所言，Bootstrap 提供两种布局方式， 包括固定(Fixed)和流式(Fliud)布局。如图1-5所示，左边为 Fixed 布局，右边为 Fluid 布局： 图1-5 布局(Layout) 固定布局代码如下： ... 流式布局代码如下： 如果对 Bootstrap 提供的布局不够满意，可以参见 Less Frame Work 提供的模板。 最后，再次强调，官方文档极其优秀，强烈推荐各位直接参考和学习之。http://twitter.github.com/bootstrap/inde x.html 参考文献与延伸阅读： 1.Bootstrap 的来由和发展。http://www.alistapart.com/articles/building-twitter-bootstrap/ 2.Less 与 Sass 的介绍与对比.http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-compariso n-to-sass/ 3.Html5模板 http://html5boilerplate.com/ 4.Html5与 Bootstrap 混合项目(H5BP)https://gist.github.com/1422879 5.20个有用的 Bootstrap 资源 http://www.webresourcesdepot.com/20-beautiful-resources-that-complement-twitter-bo otstrap/ 6.Bootstrap 按钮生成器 http://charliepark.org/bootstrap_buttons/ 7.前后端结合讨论 http://stackoverflow.com/questions/9525170/backend-technology-for-front-end-technologies-lik e-twitter-bootstrap 8. Bootstrap 英文教程 http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/stepping-out-with-bootstrap-from-t witter/ BootStrap 入门教程 (二) 上讲回顾：Bootstrap 的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局，它同时建立了一 个宽达940px 和12列的格网系统。 基于手脚架(Scaffolding)之上，Bootstrap 的基础 CSS(Base CSS)提供了一系列的基础 Html 页面要素，旨 在为用户提供新鲜、一致的页面外观和感觉。本文将主要深入讲解排版(Typography),表格(Table),表单(Forms), 按钮(Buttons)这四个方面的内容。  排版 (Typography)，它囊括标题(Headings),段落 (paragraphs), 列表(lists)以及其他内联要素。我们可以 通过修改 variables.less 的两个变量:@baseFontSize 和 @baseLineHeight 来控制整体排版的样式。Bootstrap 同时还用了一些其他的算术方法来创建所有类型要素的 margin,padding,line-height 等。 1.1 标题和段落使用常见的 html和

即可表现,可以不必考虑 margin,padding。两者 显示效果如图2-1所示： 图2-1 标题与段落(Headings¶graphs) 1.2 强调(Emphasis).使用和两个标签，前者使用粗体，后者使用斜体来强调标签内容。请 注意标签在 html4中定义语气更重的强调文本；在 HTML 5 中， 定义重要的文本。这些短语 标签也可以通过定义 CSS 的方式来丰富效果。更多短语标签请参见[1].缩写(abbreviations ).使用，它重 新封装了该标签，鼠标滑过会异步地显示缩写的含义。引入 title 属性来显示原文，使用.initialism 类对缩写以 大写方式显示。 1.3 引用文字(Blockquotes).使用
标签和两个标签，前者
是引用的文字 内容，后者是可选的要素，能够添加书写式的引用，比如内容作者。如图2-2所示 图2-2 引用(Blockquotes) 代码片段如下所示：

凌冬将至. 我是黑暗中的利剑，长城上的守卫，抵御寒冷的烈焰，破晓时分的光线，唤醒眠者的号角，守护王国的坚盾。

守夜人军团总司令.蒙奇.D.路飞

凌冬将至. 我是黑暗中的利剑，长城上的守卫，抵御寒冷的烈焰，破晓时分的光线，唤醒眠者的号角，守护王国的坚盾。

守夜人军 团总司令.蒙奇.D.路飞
1.4列表(lists).Bootstrap 提供三种标签来表现不同类型的列表。
    表示无序列表，
      表 示无样式的无序列表，
        表示有序列表，
        表示描述列表，
        表示竖排描述列表。 图2-3较好显示了这几种列表： 图2-3 列表(lists) 2.表格(Table).依然使用
        等标签来表现表格。主要提供了四个 css 的类来控制表格的边 和结构。表2-1显示了 bootstrap 的 table 可选项。 名字 Class 描述 Default None 没有样式，只有行和列 Basic .table 只有在行间有竖线 Bordered .table-bordered 圆角和添加外边框 Zebra-stripe .table-striped 为奇数行添加淡灰色的背景色 Condensed .table-condensed 将横向的 padding 对切 表2-1 表格选项(Table Options) 我们可以将这些 CSS 类结合起来使用，如图2-4所示，显示一个混合的表格： 图2-4 表格(Table) 代码片段如下所示： View Code
        Focused input Uneditable input Some value here Disabled input Disabled checkbox This is a disabled checkbox Input with warning Something may have gone wrong Input with error Please correct the error Input with success Woohoo! Select with success Woohoo! Save changes Cancel
        3. 表单(Forms).Bootstrap 的表单是非常惊艳的部分。最好的地方在于你如何使用这些 hmtl 标签，它都会 有很好的表现效果，而且不需要其他多余的代码。无论多复杂的布局都可以根据这些简洁，可扩展，事件绑定 的要素来轻易实现。主要提供了四四种表单选项，如表2-2所示： 名字 Class 描述 Vertical (default) .form-vertical (not required) 堆放式, 可控制的左对齐标签 Inline .form-inline 左对齐标签和简约的内联控制块 Search .form-search 放大的圆角，具有美感的搜索框 Horizontal .form-horizontal 左漂浮, 右对齐标签 推荐到官方文档去体验下各种表单要素的真实效果，在 chrome,Firefox 等现代浏览器下显示十分优 雅。同时可以使用.control-group 来控制表单输入、错误等状态，需要 wekit 内核。如图2-5所示： 图2-5 表单状态控制 代码片段如下： View Code
        Focused input Uneditable input Some value here Disabled input Disabled checkbox This is a disabled checkbox Input with warning Something may have gone wrong Input with error Please correct the error Input with success Woohoo! Select with success Woohoo! Save changes Cancel
        4.按钮(Buttons).Bootstrap 提供多种样式的按钮，同样是通过 CSS 的类来控制,包括 btn, btn-primary, btn-info,btn-success 等不同颜色的按钮，亦可以简单通过.btn-large .btn-mini 等 CSS 的 class 控制按钮大小，能够 同时用在,
        Button class="" Description
        Default btn Standard gray button with gradient
        Primary btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
        Info btn btn-info Used as an alternative to the default styles
        Success btn btn-success Indicates a successful or positive action
        Warning btn btn-warning Indicates caution should be taken with this action
        Danger btn btn-danger Indicates a dangerous or potentially negative action
        Inverse btn btn-inverse Alternate dark gray button, not tied to a semantic action or use
        如果需要更多样式的按钮，可以在这个网站来定制。 如果需要更多的整个网站的样式和风格，可 以在这个和那个网站来定制。 参考文献与延伸阅读 1. M. Pilgrim, HTML5: up and running: Oreilly & Associates Inc, 2010 2. HTML 5 标签 http://www.w3school.com.cn/html5/tag_caption.asp 3. StyleBootstrap http://stylebootstrap.info/ 4. 基于 wordpress 的 Bootstrap http://bootstrapwp.rachelbaker.me/ 5.Why did Twitter release Bootstrap? http://www.quora.com/Why-did-Twitter-release-Bootstrap BootStrap 入门教程 (三) 上讲回顾：Bootstrap 的基础 CSS(Base CSS)提供了优雅，一致的多种基础 Html 页面要素，包括排版,表格, 表单,按钮等,能够满足前端工程师的基本要素需求。 Bootstrap 作为完整的前端工具集，内建了大量的强大优雅可重用的组件,包括按钮(Button),导航 (Navigation),标签(Labels)，徽章(Badges)，排版(Typography)，缩略图( thumbnails),提醒(Alert)，进度条(progress bar)，杂项(Miscellaneous)。本讲将深入讲解这些内容。 1. 按钮(Button) 上讲最后提及到 button 的多种简单样式，然而在 bootstrap 中可以通过组合 button，从而获得更多类似 于工具条的功能，组件中的按钮可以组合成按钮组(button group)和按钮式下拉菜单(button drown menu). (下一讲的 Javascript Plugin 会提及到更多的按钮的应用). 1.1 按钮组(button group) 按钮组顾名思义是将多个按钮集合成一个页面部件。只需要使用 btn-group 类和一系列的或者 Middle Right

        按钮工具条

        1 2 3 4 5 6 7 8

        按钮下拉菜单

        Action
      1. Action
      2. Another action
      3. Something else here
      4. Separated link
    Action
  • Action
  • Another action
  • Something else here
  • Separated link
Danger
  • Action
  • Another action
  • Something else here
  • Separated link
    • Warning
  • Action
  • Another action
  • Something else here
  • Separated link
    • Success
  • Action
  • Another action
  • Something else here
  • Separated link
    • Info
  • Action
  • Another action
  • Something else here
  • Separated link
    • Inverse
  • Action
  • Another action
  • Something else here
  • Separated link
    • 同时 bootstrap 还有分隔符的下拉菜单和上拉菜单按钮，可以参考文档。 2.导航(Navigation) 2.1 轻量导航(Nav,tabs,and pills) bootstrap 的导航非常多样和灵活，允许使用同样的标签，不同的 CSS 类，带来不同风格的导航条， 具有非常高的可定制性。所有的导航组件，包括 tabs,pills,lists 标签，都必须使用.nav 的类实现基础的导航标签。 除了我们常见的导航，还可以利用.nav-stacked 类来实现堆叠式(stacked)--竖式的导航条。 如图3-3所示，展示了多种基础风格的导航。 图3-3 多种基础风格导航 代码片段如下： View Code

    基础 tabs

    Home
  • Profile
  • Messages

    • 基础 pills

    Home
  • Profile
  • Messages

    • 竖排 tabs

    Home
  • Profile
  • Messages

    • 竖排 pills

    Home
  • Profile
  • Messages
    • 下拉菜单的导航条和列表式(Nav list)的导航条都是页面常用要素，Nav list 类似于 OSX 的 Finder，可 以带有图标。它们同样可以用.nav 作为基础类，来实现这些组件。同时还有各种 tab 风格的导航条，在下讲再 补充。如图3-4所示： 图3-4 列表与下拉导航 代码依然简单，片段如下： View Code

    基础 Nav List

    List header Home
  • Library
  • Applications
    • Another list header
  • Profile
  • Settings
  • Help

    • 图标 List

    List header Home
  • Library
  • Applications
    • Another list header
  • Profile
  • Settings
  • Help

    • pills 式的下拉菜单

    Home
  • Help
    • Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

    • tab 式的下拉菜单

    Home
  • Help
    • Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link
    • 2.2 导航条(Navbar) 最最重要的页面要素，莫过于页面头部的导航条，这是几乎任何页面都会使用到的。Bootstrap 提供 的基础样式的导航条，是目前互联网的流行的“硬又黑”，当然你可以用 Less 来定制它。我们要注意到导航条 的基础类不再是.nav 而是 navbar。 ，至于顶部或者底部，用 navbar-fixed-top 与 navbar-fixed-bottom 来置顶/底.同时可以在 navbar 中使用 form 要 素，比如.navbar-form。同时支持响应式操作，通过.nav-collapse 或者直接是.collapse 类实现。如图3-5所示： 图3-5 导航条 代码片段如下： View Code Project name Home
  • Link
  • Link
  • Link
    • Dropdown
  • Action
  • Another action
  • Something else here
    • Nav header
  • Separated link
  • One more separated link
  • Link
    • Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link
    • 2.3 面包屑导航(Breadcrumbs)与页码(Pagination)  面包屑导航(BreadCrumbs)导航用作显示用户在网站或者 App 的位置，关于 Breadcrumbs 面包屑导航 的优点与对 SEO 的作用，请参考这个页面。Bootstrap 的“面包”用在代码仓库式的页面很优雅，具体实现 如图3-6所示： 图3-6 面包屑导航(BreadCrumbs)  页码(Pagination)也是非常常用的页面要素，Bootstrap 提供两种风格的翻页组件。 一个是多页面导航， 用于多个页码的跳转，它具有极简主义风格的翻页提示，能够很好应用在结果搜索页面；另一种则是 Pager， 是轻量级组件，可以快速翻动上下页，适用于个人博客或者杂志。如图3-7所示： 图3-7 页码(Pagination) 以上两种导航，代码片段如下： View Code Home
  • Home /
    • Library
  • Home /
  • Library /
    • Data
      « 1
    • 2
    • 3
    • 4
    • »
    • «
    • 10
      • 11
    • 12
    • »
    • «
      • 10 ...
    • 20
    • »
      1
    • 2
    • 3
    • 4
    • 5
  • Previous
  • Next
    • ← Older Newer → 3.标签(Label)、徽章(Badges)、排版(Typographic)与缩略图 (Thumbnails) 3.1 标签(Label)与徽章(Badges) 标签是一个很好用的页面小要素，bootstrap 具有多种颜色标签，表达不同的页面信息。只需要简单使用 label 标签即可。徽章是细小而简单的组件，用于指示或者计算某种类别的要素，在在 email 客户端很常见，实 际上在一些签到式的网站(LBS)上也常常用到。如图3-8所示： 图3-8 标签(Label)与徽章(Badges) 代码片段如下： View Code Labels Markup Default <span class="label">Default</span> Success <span class="label label-success">Success</span> Warning <span class="label label-warning">Warning</span> Important <span class="label label-important">Important</span> Info <span class="label label-info">Info</span> Inverse <span class="label label-inverse">Inverse</span> Name Example Markup Default 1 <span class="badge">1</span> Success 2 <span class="badge badge-success">2</span> Warning 4 <span class="badge badge-warning">4</span> Important 6 <span class="badge badge-important">6</span> Info 8 <span class="badge badge-info">8</span> Inverse 10 <span class="badge badge-inverse">10</span> 3.2 排版(Typographic) 我们在第一讲就提及到排版 (Typographic) ，这里主要是涉及到两个排版组 件:Hero-unit,Page-header.Hero-unit 是一个轻量级的可扩展的组件，主要用于市场推广网站显示它们大量的要素。 而 Page-header 则是简单为页面段落的头部设置一个合适的空间和排版形式。如图3-9所示： 图3-9 排版(Typographic) 代码片段如下： View Code

    Hello, world!

    简单的 hero unit.

    page header 例子 Subtext for header

    半小时左右，每25分钟集中精力工作，然后休息5分钟。哪怕工作没有 完成，也要定时休息，然后再进入下一个番茄时间。 3.3 缩略图(Thumbnails) 缩略图，可以作为图片，视频，文字的格网结构展示。实现默认形式的 bootstrap 缩略图，只需要简单 的 thumbnails 标签。Thumbnails 多应用于图片、视屏的搜索结果等页面，还可以链接到其他页面。同样的它具 有很好的可定制性，可以将文章片段，按钮等标签融入缩略图，同时可以混合与匹配不同大小的缩略图。如图 3-10,3-11所示： 图3-10 缩略图1(thumbnails) 图3-11 缩略图2(thumbnails) 代码片段如下： View Code

    环绕式缩略图

    默认缩略图

    可定制

    Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Action Action

    Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Action Action

    4.提醒区域(Alerts),进度条(Progressing Bar)，杂项(Miscellaneous) 4.1提醒区域(Alerts) 在 Bootstrap 2中重写了提醒区域的基础类，使用.alert 简化了原有的.alert-message 类。为了使得组 件更为简洁与耐用，Bootstrap 去除了不同的 alert block 的外观，内容具有更多 padding 边距和可以显示更多文 字。如图3-12所示： 图3-12 提醒区域(Alert) 代码片段如下： View Code

    alert 例子

    × 测试这是 alert info 提醒区域.

    alert 例子

    × 测试这是 alert error 提醒区域.

    alert 例子

    × 测试这是 alert success 提醒区域. 4.2 进度条(Processing Bar) 进度条，这也是不可缺少的页面要素，在重定向，载入等页面都经常用到，Bootstrap 提供多种漂亮、 简单、多种颜色的进度条。不过其中条纹和动画效果的进度条不支持 IE 浏览器，原因是进度条使用了 CSS3 的渐变(gradients)、透明度(transitions)、动画效果(animations)来实现它们的效果。IE7-9和旧版的 Firefox 都不支 持这些特性，所以在实现进度条的时候请注意浏览器支持程度。如图3-13所示， 图3-13 进度条(Processing Bar) 代码片段如下： View Code

    基础

    默认的进度条

    动画效果

    带有条纹的动画效果进度条 (no IE).

    Striped

    使用透明度来生成条纹效果 (no IE).

    4.3 杂项(Miscellaneous) Bootstrap 的杂项包括两个轻量级的组件，一个是 well，用于表达插入效果。另一个是关闭图标， 可以用于提醒区域，模式窗口(Modal)的关闭。Modal 将会在下讲的 javascript pluging 中讲解到。如图3-14所示： 图3-14 杂项(Miscellaneous) 代码如下： View Code

    Wells

    使用 Well 来显示插入效果

    看！我是 Well！

    关闭图标

    用于提醒区域，模式窗口(Modal)的关闭.

    ×

    参考文献与延伸阅读： 1.CSS3 Tutorials http://www.w3schools.com/css3/default.asp BootStrap 入门教程 (四) 上讲回顾：Bootstrap 组件丰富同时具有良好可扩展性，能够很好地应用在生产环境。这些组件包括按钮 (Button),导航(Navigation)，缩略图( thumbnails),提醒(Alert)，进度条(progress bar)等，能够很好减少前端工程师 的代码量，实现更加丰富充实的页面。 Bootstrap 作为一套良好的前端工具，要实现现代的动态页面效果，javascript 插件是必不可少的。它提 供了12个基于 JQuery 类库的插件，包括模态窗口(Modals),滚动监控(Scrollspy),标签效果(Tabs),提示效果 (Tooltip),“泡芙”效果(popovers),警告区域(Alerts),折叠效果(Collapse),旋转木马(carousel),输入提示(typeahead)等. 这些内容会分作两讲来阐述，本讲将深入讲解 modals 等插件。在 bootstrap 中所有涉及动画效果的 javascript 插件，都必须先引用 Transitions JS，包括 modals,alerts 等来实现淡出效果。 1.模态窗口(Modals) 模态窗口是指除非采取有效的关闭手段，用户的鼠标焦点或者输入光标将一直停留在其上的窗口(对 话框).Bootstrap 对于模态窗口的实现十分精简灵活，用户只需要使用少量的代码和智能的默认设置，即能实现 传统实现传统的 Javascript 效果的模态窗口。默认的 Bootstrap 模态窗口效果，包括对话框从屏幕上方落下，屏 幕其他区域变暗淡，模态窗口的隐藏等。这些效果分别对应.modal .fade .hide 这些类。我们可以不用写任何 javascript 代码来实现 Modal 效果，只需要将 data-toggle="modal" 放置于在触发控制要素(如按钮，超链接等)， 并指定它的 Modal 窗口的 ID 链接(data-target="#mymodal"，href="#mymodal")。当这些控制要素被触发的时候， modal 窗口就会出现了。模式窗口的内容可以非常丰富，这些内容都需要包括在 modal 的 div 内，并可以定义 modal 窗口的头部，内容和脚部。 如果使用 Jquery 调用 Modal，也只需要一行 javascript 代码， $('#myModal').modal(options) 该选项包括 backdrop,keyboard,show 三项，主要控制模态窗口的动作。Modal 的方法主要包括 show,hide,toogle 等，主要用于模态窗口的状态控制。Modal 的触发事件包括 shown,hiden 等，主要用于控制模 态窗口的功能触发控制。具体效果可以到官方文档的该处尝试一下，点击 Launch demo modal 按钮即可。Modal 的实现如图4-1所示： 图4-1 模态窗口(Modal) 代码如下： View Code ×

    添加收藏: 我买过这个服务

    求评价(@^_^@) :

    Close Save changes 2.滚动监控(Scrollspy) 滚动监控是用来自动更新导航位置基于用户页面滚动的位置。实现该效果，也只需要在你想监控的 滚动要素上，添加 data-spy="scroll"，一般是在 body 上添加。使用 jquery 同样调用方法比较简单，只需要一行 代码：$('#navbar').scrollspy() .该插件只有 refresh 方法，offset 属性等。具体效果可以到官方文档的该处尝试一 下。 效果如图4-2所示： 图4-2 滚动监控(Scrollspy) 代码如下： View Code Project Name
  • @fat
  • @mdo
    • Dropdown
  • one
  • two
  • three
    • @fat

    Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

    @mdo

    Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

    one

    Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

    two

    In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

    three

    Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

    Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

    3.标签效果(Tabs) 标签插件添加了快速的动态的 tab 和 pill，来实现过渡页面内容的效果。同样的，我们可以不 用写任何 javascript 代码来实现该效果，我们只需要在 tab 或者 piil 页面要素上简单地添加上 nav 和 nav-tabs 并引用该 js 文件即可。同时可以使用 ul 标签来样式化你的要素。具体效果可以到官方文档的该处尝试一下。 效果如图4-3所示： 图4-3 标签效果(Tabs) 代码如下： View Code Home
  • Profile
    • Dropdown
  • @fat
  • @mdo

    • Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

    Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

    Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

    Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

    4.提示效果(Tooltip)与“泡芙”效果(popovers) 4.1 提示效果(Tooltip) 提示效果，就是用户鼠标划过或者放在某些连接上，浮现的内容提示和补充。Bootstrap2.0的 Tooltip 的实现，受 Jason Frame 写的出色的 jQuery.tipsy 插件所启发。该版本的 Tooltips 不再依赖于图片，而是 使用 CSS3的动画和数据属性。与本文上述的其他插件不同的是，tooltip 的触发事件，必须使用 javascript 代码 实现。我们先来看 Tooltip 的 html 写法： 别摸我 基于性能的原因， 提示效果(Tooltip)和“泡芙”效果(popovers)都在属性中内置了数据选择器，我们 可以指定 css 或者 jquery 选择器来使用它们。触发 tooltip，只需要一行代码： $('#example').tooltip(options) 它的属性选项包括：animation,placement,selector,trigger,delay 等。animation 是用来实现提示的淡出 css 效果，placement 则控制提示出现的位置(top,button,left 等)。selector 选项就是提供给用户，以控制 tooltip 出 现在(委派于/装饰与)页面具体的某个目标上，默认是 false。trigger 是触发 tooltip 的鼠标或者键盘事件类型，包 括 hover,focus,maual 等。delay 则是控制 tooltip 的显示和延迟的时间变量(ms)，形式可以是这样：delay: { show: 500, hide: 100 }。 tooltip 效果如图4-4所示： 图4-4 提示效果(Tooltip) 代码如下所示： View Code Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

    4.2 “泡芙”效果(popovers) “泡芙”效果就是将一些次要的内容作为一个小的叠加层展添加到具体页面要素上，实现 ipad 风 格的提示效果(实际上就是放大版的 tooltip)。因此实现“泡芙”效果(popovers)首先需要引用 tooltips 插件。我们 先来看看“泡芙”效果(popovers)的 html 的写法。 推荐 对比 tooltip 的 html 的 markup，我们可以看到两者的差别就只有在于 rel 的类型而已。同样的，触发 popovers，只需要一行代码： $('#example').popover(options) 而它的属性与 tooltip 几乎完全一样……只多一个 content，用来存储叠加的内容。效果如图4-5所示： 图4-5 “泡芙”效果(popovers) 代码如下所示： View Code 推荐 参考文献与延伸阅读： 1.Modal window http://en.wikipedia.org/wiki/Modal_window 2. 模态窗口和非模态窗口 http://tgyd2006.iteye.com/blog/211497 3.Popover http://en.wikipedia.org/wiki/Popover
    还剩44页未读

    继续阅读

    下载pdf到电脑，查找使用更方便

    pdf的实际排版效果，会与网站的显示效果略有不同！！

    需要 8 金币 [ 分享pdf获得金币 ] 1 人已下载

    下载pdf

    pdf贡献者

    dkw1986

    贡献于2014-08-18

    下载需要 8 金币 [金币充值 ]
    亲，您也可以通过 分享原创pdf 来获得金币奖励！

    关键词

    前端技术 Bootstrap

    相关pdf