Boostrap基础教程之JavaScript插件篇

Boostrap提供了12种JavaScript插件,包括:

动画过渡 Transition

模态 Modal

下拉菜单 Dropdown

滚动侦测 Scrollspy

选项卡 Tab

提示框 Tooltip

弹出框 Popover

警告框 Alert

按钮 Button

折叠 Collapse

旋转轮播 Carousel

自动定位浮标 Affix

模态弹窗

<div class="modal show">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title">Modal标题</h4>
</div>
<div class="modal-body">
<p>这里是弹窗显示的内容...........</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
</div>
</div>
</div>
</div>

下拉菜单

声明式用法

一般下拉菜单都是在导航条(navbar)和选项卡(tab)上实现

<div class="nav navbar-default" id="nav-example">
<A href="#" class="navbar-brand">Project Name</A>
<ul role="navigation" class="nav navbar-nav">
<li class="dropdown">
<A data-toggle="dropdown" class="dropdown-toggle" role="button" href="#" id="drop1">
Dropdown<b class="caret"></b>
</A>
<ul aria-labelledby="drop1" role="menu" class="dropdown-menu">
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action1</a> </li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action2</a> </li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action3</a> </li>
</ul>
</li>
<li class="dropdown open">
<A data-toggle="dropdown" class="dropdown-toggle" role="button" href="#" id="drop2">
Dropdown2<b class="caret"></b>
</A>
<ul aria-labelledby="drop2" role="menu" class="dropdown-menu">
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action4</a> </li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action5</a> </li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action6</a> </li>
</ul>
</li>
</ul>
</div>

选项卡

<%--导航条选项卡--%>
<ul class="nav nav-tabs">
<li><a href="#home" data-toggle="tab">Home</a> </li>
<li><a href="#profile" data-toggle="tab">Profile</a> </li>
<li><a href="#messages" data-toggle="tab">Messages</a> </li>
<li><a href="#settings" data-toggle="tab">Settings</a> </li>
</ul>
<%--选项卡面板--%>
<div class="tab-content">
<div class="tab-pane active" id="home">home...</div>
<div class="tab-pane" id="profile">profile...</div>
<div class="tab-pane" id="messages">messages...</div>
<div class="tab-pane" id="settings">settings...</div>
</div>

提示框

<button data-original-title="Tooltip on left" class="btn btn-default" data-toggle="tooltip"
data-placement="left">左侧Tooltip</button>
<button data-original-title="Tooltip on top" class="btn btn-default" data-toggle="tooltip"
data-placement="top">上方Tooltip</button>
<button data-original-title="Tooltip on bottom" class="btn btn-default" data-toggle="tooltip"
data-placement="bottom">下方Tooltip</button>
<button data-original-title="Tooltip on right" class="btn btn-default" data-toggle="tooltip"
data-placement="right">右侧Tooltip</button>

警告框

<div class="alert alert-warning fade in">
<button data-mismiss="alert" class="close" type="button">X</button>
<h4>警告标题</h4>
<p>Change this and that and try aggin。 </p>
</div>

折叠

<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<A data-toggle="collapse" data-parent="#accordion" href="#accordion">触发元素#1</A>
</h4>
</div>
<div class="panel-collapse collapse in" id="collapseOne">
<div class="panel-body">
折叠内容......
</div>
</div>
</div>
</div>

旋转轮播

<div data-ride="carouse1" class="carousel cameraSlide" id="container">
<%--图片容器--%>
<div class="carousel-inner">
<div class="item active"><img src="images/banner_slide_01.jpg"></div>
<div class="item "><img src="images/banner_slide_02.jpg"></div>
<div class="item"><img src="images/banner_slide_03.jpg"></div>
</div>
<%--圆圈指示符--%>
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#container" class="active"></li>
<li data-slide-to="1" data-target="#container"></li>
<li data-slide-to="2" data-target="#container"></li>
</ol>
<%--左右控制按钮--%>
<a data-slide="prev" href="#container" class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a data-slide="prev" href="#container" class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

以上所述是小编给大家介绍的Boostrap基础教程之JavaScript插件篇,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • C++之boost::array的用法

    本文实例讲述了C++之boost::array的用法,分享给大家供大家参考.具体如下: 复制代码 代码如下: #include <string>  #include <iostream>  #include <boost/array.hpp>  #include <algorithm>  using namespace std;  int main()  {      boost::array<int, 5> array_temp = {{12,

  • 浅析Boost智能指针:scoped_ptr shared_ptr weak_ptr

    一. scoped_ptrboost::scoped_ptr和std::auto_ptr非常类似,是一个简单的智能指针,它能够保证在离开作用域后对象被自动释放.下列代码演示了该指针的基本应用: 复制代码 代码如下: #include <string>#include <iostream>#include <boost/scoped_ptr.hpp> class implementation{public:    ~implementation() { std::cout

  • C++中Boost库裁剪与其应用详解

    前言 Boost 库涵盖的范围极广,有字符串和文本处理相关子库比如 format 库和 regexp 库,有容器相关子库比如 variant 库(和 Qt 的 QVariant 有得一拼),有迭代器子库比如 tokenizer 库(可以把字符进行 tokenize),还有算法.函数对象和高阶编程相关子库如functional 库.lambda 库和 signal 库,还有泛型编程.模板编程子库如 call traits.mpl,还有并发编程相关的 thread 库,等等等等. Boost 是如此

  • c语言标准库中字符转换函数和数字转换函数

    字符转换为数字: #include<stdlib.h> atoi();将字符转换为整型   例:char ch1;int i=atoi(ch1); atol();将字符转化为长整型  例:char ch2;long l=atol(ch2); atof();将字符转化为浮点型  例:char ch3;float f=atof(ch3); strtod(); 将字符串转化为双精度类型  例:string str1:double d=strtod(str1); strtol(); 将字符串转化为长整

  • 使用设计模式中的单例模式来实现C++的boost库

    线程安全的单例模式 一.懒汉模式:即第一次调用该类实例的时候才产生一个新的该类实例,并在以后仅返回此实例. 需要用锁,来保证其线程安全性:原因:多个线程可能进入判断是否已经存在实例的if语句,从而non thread safety. 使用double-check来保证thread safety.但是如果处理大量数据时,该锁才成为严重的性能瓶颈. 1.静态成员实例的懒汉模式: class Singleton { private: static Singleton* m_instance; Sing

  • C++之Boost::array用法简介

    本文实例讲述了c++里支持静态数组的容器:boost.array.分享给大家供大家参考.具体分析如下: 很多C++程序员都认为boost.array很有可能出现在下一代标准库里.对于boost.array的用法有一个基本的了解是很有必要的. 1. 为什么我们需要固定大小的数组的容器 首先,固定大小的数组还是很常见的,虽然stl提供了vector,但是vector作为动态可增长的数组,比静态数组多了一点开销,这在一些人看来是无法忍受的.c++里也需要提供固定大小容量的数组容器,当然,性能可以和普通

  • 浅析C语言头文件和库的一些问题

    使用gcc的编译器 头文件没有包含stdlib.h,使用atoi函数(atoi函数在stdlib.h中才有声明),编译却没有出错 如果编译的时候加上-Wall选项,会有个警告,请问这是为什么?这是因为C语言一个非常傻的规定:一个函数如果没有声明函数原型,其返回值类型就是int(所谓的implicit declaration).由于atoi恰好真返回int,所以你即使不包含它的头文件也不报错.至于这个警告,是为了避免你由于忘记声明函数原型而出错. 编译器对于没有定义过的函数原型直接当作它返回int

  • C语言使用stdlib.h库函数的二分查找和快速排序的实现代码

    快速排序: 复制代码 代码如下: #include <stdlib.h>#include <stdio.h>#include <string.h> #define LENGTH(x) sizeof(x)/sizeof(x[0]) /**输出数组元素*\param arr:指向数组的指针*\param len:数组元素的个数*/void print(char (*arr)[10],int len){    int i;    for (i=0;i<len;i++) 

  • C++之BOOST字符串查找示例

    本文实例讲述了C++中BOOST字符串查找的方法,分享给大家供大家参考.具体方法如下: BOOST  字符串查找示例 复制代码 代码如下: #include <string>  #include <iostream>  #include <algorithm>  #include <functional>  #include <boost/algorithm/string/case_conv.hpp>  #include <boost/al

  • 浅析C++中boost.variant的几种访问方法

    Boost.Variant Variant库包含一个不同于union的泛型类,用于在存储和操作来自于不同类型的对象.这个库的一个特点是支持类型安全的访问,减少了不同数据类型的类型转换代码的共同问题. Variant 库如何改进你的程序? •对用户指定的多种类型的进行类型安全的存储和取回 •在标准库容器中存储不同类型的方法 •变量访问的编译期检查 •高效的.基于栈的变量存储 Variant 库关注的是对一组限定类型的类型安全存储及取回,即非无类的联合.Boost.Variant 库与 Boost.

随机推荐