技术交流 – FreeNAS中文网

FreeNAS中文网是一个编程技术交流的平台，欢迎技术员程序猿前来投稿！

• 首页
• 编程日记
• 技术总结
• 会员

扫一扫

首页 编程日记 正文内容

BootStrap入门教程

• 编程日记

更新时间：2024-12-23 08:47:10 21

admin 管理员组

文章数量: 887021

2023年12月17日发(作者：supervise词根)

本作品由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和

图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 1 2 3 4 5 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 1 2 3 4 5 Woohoo! Save changes Cancel 4.按钮(Buttons).Bootstrap提供多种样式的按钮，同样是通过CSS的类来控制,包括btn, btn-primary, btn-info,btn-success等不同颜色的按钮，亦可以简单通过.btn-large .btn-mini等CSS的class控制按钮大小，能够同时用在,,标签上，非常简单易用。如图2-6所示，不同颜色的按钮： 图2-6 按钮(Buttons) 代码片段如下： View Code
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类和一系列的或者标签，就可以轻易地生成一个按钮组或者按钮工具条。关于btn-group的编程实践上：

• 建议在单一的按钮组中不要混合使用和

标签，只用它们其中一个。

• 同一按钮组最好使用单一色

• 使用图标的时候要确保正确的引用位置

按钮组和按钮工具条都非常容易实现，如图3-1所示：

图3-1 按钮组(button group)

1.2 按钮式下拉菜单(button drown menu)

Bootstrap允许使用任意的按钮标签来触发一个下拉菜单，只需要将正确的菜单内容并置于在.btn-group类标签内。如图3-2所示：

图3-2 按钮下拉菜单

以上两种按钮组件，代码片段如下：

View Code

按钮组

Left

Middle

Right

按钮工具条

1

2

3

4

5

6

7

8

按钮下拉菜单

Action

Another action

Something else here

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入门教程 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/free/1702821565h432160.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

更多相关文章

H5页面，判断是在微信浏览器还是小程序 打开

• 技术总结

2月前

判断是否在微信小程序中打开var uawindow.navigator.userAgent.toLowerCase();let thatthis;if(ua.match(MicroMessengeri)micromes

校园网弹不出登录页面怎么办

• 技术总结

2月前

参考了知乎一位大神的做法，亲测有用 添加链接描述

计算机页面变大要恢复怎么办,电脑页面变得很宽怎么办

• 技术总结

2月前

1. 电脑屏幕变宽,变大了要怎么恢复 电脑屏幕变宽，变大了恢复的方法如下： 1、首先在电脑桌面空白处点击鼠标右键，选择屏幕分辨率。 2、然后下拉分辨率的小箭头&#xf

IntelliJ IDEA中浏览器打开页面，出现找不到文件chrome等浏览器路径情况

• 技术总结

2月前

1、右击桌面上的chrome浏览器图标，找到属性–>快捷方式–>目标，复制路径（即chrome浏览器.exe文件的路径）。2、打开Int

Vue进阶（幺陆叁）：vue项目启动后自动打开页面并设置默认浏览器

• 技术总结

2月前

文章目录 一、修改默认浏览器二、vue 项目启动自动打开页面三、拓展阅读 以windows 系统为例，操作方法如下： 一、修改默认浏览器 设置谷歌浏览器为默认浏览器。 1、首先打开“开始菜单

selenium可以打开浏览器但页面空白不输入URL

• 技术总结

2月前

新手如我，在学习的过程中不断地踩坑。 今天在运行一个简单的pythonselenium打开火狐浏览器输入百度网址的测试demo。 import timefrom selenium import webdriverbr

Windows11在Edge浏览器中打开IE浏览器兼容的页面，在Edge浏览器打开加载ActiveX控件的页面

• 技术总结

2月前

打开Edge浏览器，点击右上角三个小点···，在弹出的列表中点击设置，进入设置界面。 进入设置界面后，点击默认浏览器，如下图进行设

解决web网页调用支付宝支付，新窗口打开页面被浏览器拦截（兼容Ie）

• 技术总结

2月前

1，优先打开空白页      let newWindowwindow.open("about:blank"); 2，新窗口跳转到支付页面     newWindow.lo

HBuilderxH5页面打包APP后，调取手机第三方APP程序（浏览器，淘宝等等），有打开，没有就给他链接下载，并指定浏览器打开对应的URL

• 技术总结

2月前

再用HBuilder打包H5项目APP时，有一个需求就是调动手机中的谷歌浏览器，打开指定的URL。 顺便说下判断手机是安卓还是IOS系统的用法： if (plus.os.n

使用FRP远程访问TP-LINK路由器管理页面

• 技术总结

2月前

文章目录 1. 问题发现2. 解决方案3. 参考文章1. 问题发现 FRP 客户端使用如下配置 [TP-LINK-login]type = tcplocal_ip = tploginlocal_port = 80remote_p

tp交换机管理页面_tplink交换机设置步骤使用方法

• 技术总结

2月前

原标题："tplink交换机使用方法步骤详解"的相关路由器设置教程资料分享。- 来源：191路由网。 有网友问小编tplink 交换机怎么设置，191路由

chatgpt这么火？前端如何实现类似chatgpt的对话页面_chatgpt前端页面(2)

• 技术总结

2月前

结尾 学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要&

怎样用chatgpt快速写一个具有动效的页面

• 技术总结

2月前

下图是想做的页面效果，根据请求url的不同，图标以及下面的提示语不同，点击“示例一”，“示例二”，“示例三”后被点击的框颜色改变&

vue 模拟 chatgpt 聊天效果：js 实现逐字显示、延时函数模拟对话

• 技术总结

2月前

vue 模拟 chatgpt 聊天效果：js 实现逐字显示、延时函数模拟对话 模拟 chatgpt 聊天功能，展示对话效果。其中比较有意义的技术点是：js 实现逐字显示、延时

装机打不开BIOS怎么办？如何进入Windows10的BIOS页面，如何关闭快速启动

• 技术总结

2月前

电脑有快速启动，想进去BIOS页面非常困难，在临开机的页面，按触发按键不管用。 然后我看到了一种新的进入BIOS的方式： （1

教你在本地部署AI大模型，效果很赞！

• 技术总结

2月前

随着人工智能的发展，AI与我们的工作与生活变得越来越紧密。AI大模型主要分为开源和不开源两类。现如今开源模型变得越来越好，甚至超过了很多不开源的大模型。 前不久谷歌发布了gemma2模型的2B版

php模拟微信用户打开页面,PHP基于curl实现模拟微信浏览器打开微信链接的方法示例...

• 技术总结

2月前

本文实例讲述了PHP基于curl实现模拟微信浏览器打开微信链接的方法。分享给大家供大家参考，具体如下： 网络上没有可以直接打开微信的浏览器 但是我们可以模拟浏览器 微信浏览器的HTTP_USER_AGENT 在iPhone下，返回 Mozi

ElementUi进行tab页面跳转或切换并返回造成原页面滚动轴不能显示在历史位置

• 技术总结

1月前

问题描述：原页面进行连接跳转或tab业切换并返回时滚动轴位置跑到最上面scrollTop值变为0问题 解决思路：利用变量进行缓存跳转之前页面的scrollTop并在返回页面的时候进行重新赋值

hbase管理页面打不开_wifi.cmcc访问路由器管理页面打不开怎么解决

• 技术总结

1月前

在实际使用中国移动定制版路由器的时候经常遇到wifi.cmcc访问路由器管理页面打不开的情况。对于wifi.cmcc这个域名具有一定的特殊性，因为它不是一个严格意义上的网址，这也就造成了一定的识别问题。在本文家用路由器网来分析有关输入wi

hexo部署成功但是没效果_使用 Hexo+GitHub 搭建个人免费博客教程（小白向）

• 技术总结

1月前

前言 近些年来很多用户都喜欢使用 GitHub Pages 来搭建 Hexo 静态博客网站，其最吸引人的莫过于完全免费使用，并且非常稳定。 虽然搭建时比较麻烦，有点折腾，但是配置完成后，基本不需要操心维护的事，甚至放了几年都忘记了，打开来看

发表评论

全部评论 0

暂无评论

推荐文章

mysql查看、设置、删除约束命令一应俱全

计算机信息专业致谢词,计算机专业的论文致谢

【BZOJ2876】【NOI2012】骑行川藏（数学，二分答案）

NSSM：封装exe和cmd为Windows系统服务

【本科大学毕业生论文分享】基于SSM框架的连锁服装销售系统的设计与实现

热门文章

• jsp+ssm计算机毕业设计 停车场管理系统【附源码】

  29天前

• 响铃：同上金融科技牌桌，将分拆的百度金融有哪些筹码

  29天前

• k8s容器编排 (旧版)

  29天前

• windows下使用深度学习 （NeuralStyle）模仿大师（梵高等）绘画

  29天前

• 浩斌c语言,MIX为你而声｜闪亮登场

  29天前

• ⑪霍兰德RC*型如何选专业？高考志愿填报选专业

  29天前

• windows下dirsearch安装

  24天前

• 手把手教你如何安装使用，适用于 Linux 的 Windows 子系统WSL

  14天前

• oppor17刷鸿蒙系统,coloros11正式版下载

  14天前

• 魔兽3无法启动此程序因为计算机中丢失,win10运行war3出错无法启动怎么办_win10系统war3不能启动如何解决...

  1天前

最新文章

• Raid技术

  8月前

• LSI_阵列卡操作手册

  8月前

• 破解Centos7_root用户密码

  8月前

• Redhat重置Root用户密码方法

  8月前

• 远程批量修改linux服务器密码的脚本

  8月前

• Windows7 系统安全设置权限技巧

  5小时前

• （Windows系统）详细介绍Windows系统 含有英文版

  5小时前

• 最新Windows 11教育版下载：专为教育设计的系统！

  5小时前

• Win7系统下搭建NFS服务器

  6小时前

• 零基础使用UltraISO制作并安装纯净Win10系统指南

  6小时前

CopyRight © 2022 All Rights Reserved.
Powered By 技术交流 – FreeNAS中文网| 浙ICP备08016383号-4 友情链接： 网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22 网站地图23 网站地图24 网站地图25 网站地图26 网站地图27 网站地图28 网站地图28 网站地图30 网站地图31 网站地图32 网站地图33 网站地图34 网站地图35 网站地图36 网站地图37 网站地图38 网站地图39 网站地图40 网站地图41 网站地图42 网站地图43 网站地图44 网站地图45 网站地图46