首页 > 编程札记 > javascript

BootStrap入门教程

阅读： 评论：0

2024年2月8日发(作者：)

BootStrap入门教程

本作品由VentLam创作，采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。

BootStrap入门教程 (一)

2011年，twitter的“一小撮”工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所设计和建立，在github上开源之后，迅速成为该站上最多人watch&fork的项目。大量工程师踊跃为该项目贡献代码，社区惊人地活跃，代码版本进化非常快速，官方文档质量极其高(可以说是优雅)，同时涌现了许多基于Bootstrap建设的网站：界面清新、简洁;要素排版利落大方。如下图所示：

/

/

GitHub上这样介绍 bootstrap：简单灵活可用于架构流行的用户界面和交互接口的html,css,javascript工具集。基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档，自定义JQuery插件，完整的类库，基于Less等。本系列教程遵循官方文档结构来介绍bootstrap，包括手脚架（Scaffolding),基础CSS,组件,javascript插件，使用LESS与自定义.本文主要介绍Bootstrap的基础布局--Scaffolding.

Bootstrap建立了一个响应式的12列格网布局系统，它引入了fixed和fluid-with两种布局方式。我们从全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts),响应式设计(Responsive Design)这六五个方面深入讲解Boostrap的scaffolding.

 全局样式(Global Style).Bootstrap要求html5的文件类型，所以必须在每个使用bootstrap页面的开头都引用:

...

 同时，它通过文件来设置全局的排版和连接显示风格.其中去掉了Body的margin，使用@baseFontFamily,@baseFontSize,@linkColor等变量来控制基本排版。

 格网系统(Grid System).默认的Bootstrap格网系统提供一个宽达940像素的,12列的格网。这意味着你页面默认宽度是940px,最小的单元要素宽度是940/rap能够使得你的网页可以更好地适应多种终端设备(平板电脑，智能手机等)。默认格网系统直观概念如图1-1所示：

图1-1 默认格网系统(Default Grid System)

以下简单的代码则是实现图1-1中，第三列的宽度为4和宽度为8的两个div.

...

...

2.2 偏移列. 有时候，页面要素前面需要一些空白，bootstrap提供了偏移列来实现，如图1-2所示：

图1-２ 偏移列(Offset columns)

以下代码实现了是实现图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 customization).Bootstrap允许通过修改的参数值来自定义格网系统。主要包括如表1-1所示的变量：

变量

@gridColumns

@gridColumnWidth

@gridGutterWidth

默认值 说明

12

60px

20px

列数

每列的宽度

列间距

表1-1 格网变量

我们通过修改以上值，并重新编译Bootstrap来实现自定义格网系统。如果添加新的列，需要同时修改.同样的,需要修改来获得多设备兼容.

 布局(Layout).本文最后我们讨论创建页面基础模板的布局。如前面所言，Bootstrap提供两种布局方式，包括固定(Fixed)和流式(Fliud)布局。如图1-5所示，左边为Fixed布局，右边为Fluid布局：

图1-5 布局(Layout)

固定布局代码如下：

...

流式布局代码如下：

如果对Bootstrap提供的布局不够满意，可以参见Less Frame Work 提供的模板。

最后，再次强调，官方文档极其优秀，强烈推荐各位直接参考和学习之。/bootstrap/

参考文献与延伸阅读：

rap的来由和发展。/articles/building-twitter-bootstrap/

与Sass的介绍与对比./2011/09/09/an-introduction-to-less-and-comparison-to-sass/

5模板 /

5与Bootstrap混合项目(H5BP)/1422879

5.20个有用的Bootstrap资源 /20-beautiful-resources-that-complement-twitter-bootstrap/

rap按钮生成器 /bootstrap_buttons/

7.前后端结合讨论 /questions/9525170/backend-technology-for-front-end-technologies-like-twitter-bootstrap

8. Bootstrap英文教程 /tutorials/htmlcss-tutorials/stepping-out-with-bootstrap-from-twitter/

BootStrap入门教程 (二)

上讲回顾：Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局，它同时建立了一个宽达940px和12列的格网系统。

基于手脚架(Scaffolding)之上，Bootstrap的基础CSS(Base CSS)提供了一系列的基础Html页面要素，旨在为用户提供新鲜、一致的页面外观和感觉。本文将主要深入讲解排版(Typography),表格(Table),表单(Forms),按钮(Buttons)这四个方面的内容。

 排版 (Typography)，它囊括标题(Headings),段落 (paragraphs), 列表(lists)以及其他内联要素。我们可以通过修改的两个变量:@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可选项。

        名字

        Default

        Basic

        Bordered

        Zebra-stripe

        Condensed

        表2-1 表格选项(Table Options)

        我们可以将这些CSS类结合起来使用，如图2-4所示，显示一个混合的表格：

        Class

        None

        .table

        .table-bordered

        .table-striped

        .table-condensed

        描述

        没有样式，只有行和列

        只有在行间有竖线

        圆角和添加外边框

        为奇数行添加淡灰色的背景色

        将横向的 padding 对切

        图2-4 表格(Table)

        代码片段如下所示：

        View Code

        Focused input

        focused…">

        Uneditable input

        Some value here

        Disabled input

        Disabled checkbox

        This is a disabled checkbox

        id="optionsCheckbox2" value="option1"

        disabled" id="disabledInput" type="text"

        placeholder="Disabled input here…" disabled>

        disabled>

        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

        Search

        Horizontal

        .form-inline

        .form-search

        .form-horizontal

        左对齐标签和简约的内联控制块

        放大的圆角，具有美感的搜索框

        左漂浮, 右对齐标签

        推荐到官方文档去体验下各种表单要素的真实效果，在chrome,Firefox等现代浏览器下显示十分优雅。同时可以使用.control-group来控制表单输入、错误等状态，需要wekit内核。如图2-5所示：

        图2-5 表单状态控制

        代码片段如下：

        View Code

        Focused input

        focused…">

        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

        id="optionsCheckbox2" value="option1"

        disabled" id="disabledInput" type="text"

        placeholder="Disabled input here…" disabled>

        disabled>

        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 标签 /html5/tag_

        3. StyleBootstrap /

        4. 基于wordpress的Bootstrap /

        did Twitter release Bootstrap? /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

        按钮下拉菜单

      1. Action

      2. Another action

      3. Something else here

      4. Separated link

    Action

  • Action

  • Another action

  • Something else here

  • Separated link

Danger

dropdown-toggle" data-toggle="dropdown">Action

  • 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

  • Action

  • Another action

  • Something else here

  • Separated link

    • tab式的下拉菜单

    Home

  • Help

    • data-toggle="dropdown" href="#">Dropdown

    data-toggle="dropdown" href="#">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

  • Action

  • Another action

  • Something else here

    • Nav header

  • Separated link

  • One more separated link

  • Link

  • Action

  • Another action

  • Something else here

  • Separated link

    • class="dropdown-toggle" data-toggle="dropdown">Dropdown

    class="dropdown-toggle" data-toggle="dropdown">Dropdown

    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,-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

    class="btn">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.

    class="btn">Action

    class="btn btn-primary">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)的关闭.

    ×

    参考文献与延伸阅读：

    3 Tutorials /css3/

    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

  • one

  • two

  • three

    • class="dropdown-toggle" data-toggle="dropdown">Dropdown

    class="scrollspy-example">

    @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

    data-target="#navbarExample" data-offset="0"

    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

  • @fat

  • @mdo

    • Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu

    class="dropdown-toggle" data-toggle="dropdown">Dropdown

    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写的出色的插件所启发。该版本的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

    rel="tooltip" title="first tooltip">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

    推荐

    参考文献与延伸阅读：

    window /wiki/Modal_window

    2. 模态窗口和非模态窗口 /blog/211497

    r /wiki/Popover

    BootStrap入门教程

    本文发布于:2024-02-08 07:37:23，感谢您对本站的认可！

    本文链接：https://www.4u4v.net/it/170734904366939.html

    版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。

    上一篇：bootstrap合并单元格表格类型
    下一篇：container用法css
    标签：页面   效果   要素   使用   实现   标签   按钮
    留言与评论（共有 0 条评论）
       
    验证码：
    推荐文章
    排行榜
    热门标签

    Copyright ©2019-2022 Comsenz Inc.Powered by ©

    网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23
    • 我要关灯
      我要开灯
    • 返回顶部