bootstrap-自带插件（完成的小功能）
模态框
务必将模态框的HTML代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。
<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button> <!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
模态框
进度条
<body>
<div class="container">
<div class="progress" style="margin-top: 100px">
<div id='mybar' class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0"
aria-valuemax="100" style="width: 0%">
0%
</div>
</div>
</div>
<script src="../jquery-3.2.1.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script>
var width=0;
var t;
var $thing=$('#mybar');
function changwidth() {
if (width<100){
width+=1;
$thing.text(width+"%");
$thing.css('width',width+"%")
}else{ clearInterval(t)
}
}
t=setInterval(changwidth,200)
</script>
</body>
模拟滚动的进度条
轮播图
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol> <!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./imgs/banner_1.jpg" alt="...">
<div class="carousel-caption">
<h1>第一页介绍</h1>
<p>老实人的恶毒，像...</p>
</div>
</div>
<div class="item">
<img src="./imgs/banner_2.jpg" alt="...">
<div class="carousel-caption"> </div>
</div>
<div class="item">
<img src="./imgs/banner_3.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
</div> <!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <hr>
<button class="btn btn-success" data-toggle="modal" d
轮播图
常用水平表单
<body>
<script src="../jquery-3.2.1.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<div class="container">
<div class="page-header">
<h1>信息收集卡
<small>共三步</small>
</h1>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0"
aria-valuemax="100" style="width: 33%">1/3
<span class="sr-only">45% Complete</span>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">基础信息<span class="glyphicon glyphicon-pushpin pull-right"></span>
</h3>
</div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputEmail3" placeholder="姓名">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">手机</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputPassword3" placeholder="手机">
</div>
</div>
<div class="form-group">
<label for="inputEmail4" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail4" placeholder="邮箱">
</div>
</div>
<div class="form-group">
<label for="inputPassword5" class="col-sm-2 control-label">密码</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPassword5" placeholder="密码">
</div>
</div>
<div class="form-group">
<label for="inputEmail6" class="col-sm-2 control-label">头像</label>
<div class="col-sm-10">
<input type="file" id="inputEmail6">
<p class="help-block">只支持png，jpg，gif格式</p>
</div>
</div>
<hr>
<div class="form-group">
<label class="col-sm-2 control-label">属性</label>
<div class="col-sm-10">
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
你是好人
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
你是坏人
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
你不是个人
</label>
</div>
</div>
</div>
</form>
</div>
</div>
<button type="button" class="btn btn-success pull-right">下一页</button> </div>
</body>
信息填写表单
bootstrap-自带插件（完成的小功能）的更多相关文章
- 基于bootstrap的bootstrap-editable插件实现即时编辑功能
1.引用基本css和js: <link href="bootstrap3/css/bootstrap.min.css" rel="stylesheet" ...
- Bootstrap常用的自带插件
Bootstrap自带的那些常用插件. 模态框 模态框的HTML代码放置的位置 务必将模态框的HTML代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态 ...
- Bootstrap自带的那些常用插件
1.Bootstrap自带的那些常用插件. 1.1模态框 模态框的HTML代码放置的位置 务必将模态框的HTML代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组 ...
- 【转载】利用Unity自带的合图切割功能将合图切割成子图
虽然目前网上具有切割合图功能的工具不少,但大部分都是自动切割或者根据plist之类的合图文件切割的, 这种切割往往不可自己微调或者很难维调,导致效果不理想. 今天逛贴吧发现了一位网友写的切割合图插件很 ...
- Ubuntu13.04 Eclipse下编译安装Hadoop插件及使用小例
Ubuntu13.04 Eclipse下编译安装Hadoop插件及使用小例 一.在Eclipse下编译安装Hadoop插件 Hadoop的Eclipse插件现在已经没有二进制版直接提供,只能自己编译. ...
- 使用bootstrap的JS插件实现模态框效果
在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...
- LoadRunner 自带订票系统flights 功能空白、1080端口被占用的解决办法
LoadRunner 自带订票系统flights 功能空白.1080端口被占用的解决办法 安装LoadRunner8.1后运行Mercury Web Tours Application,点击fligh ...
- 用MVC5+EF6+WebApi 做一个小功能(三) 项目搭建
一般一个项目开始之前都会有启动会,需求交底等等,其中会有一个环节,大讲特讲项目的意义,然后取一个高大上的项目名字,咱这是一个小功能谈不上项目,但是名字不能太小气了.好吧,就叫Trump吧.没有任何含义 ...
- bootstrap学习笔记 插件概述
Bootstrap插件概览 在前面布局组件章节中所讨论的组件仅仅是个开始.Bootstrap自带的12种jQuery插件,扩展了功能,可以给站点添加更多的互动.即使您不是一名高级的js开发人员, 你也 ...
- 第二百四十三节，Bootstrap模态框插件
Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一．基本使用 使用模态框 ...
随机推荐
- 02、python的基础-->占位符、while...else...、逻辑运算符
1.%s.%d格式化输出程序(%占位符,s字符串,d数字) name = input('请输入姓名:') age = input('请输入年龄:') job = input('请输入工作:') hob ...
- [已解决]报错:xlrd.compdoc.CompDocError: Workbook: size exceeds expected 17920 bytes; corrupt?
报错代码如下: filePath='test.xls' data=pd.read_excel(filePath) print(data.head()) 报错内容如下: Traceback (most ...
- 数据结构与算法简记--Trie树
Trie树 概念 多叉树,节点为字符串中的单个字符. Trie 树的本质,就是利用字符串之间的公共前缀,将重复的前缀合并在一起. 将多个字符串按字符拆分插入Trie树,用于字符串查找,关键词提示等 举 ...
- java 中String类的常用方法总结，玩转String类
String类: String类在java.lang包中,java使用String类创建一个字符串变量,字符串变量属于对象.String类对象创建后不能修改,StringBuffer & St ...
- svnadmin - Subversion 仓库管理工具
SYNOPSIS 总览 svnadmin command /path/to/repos [options] [args] OVERVIEW 概述 Subversion 是一个版本控制系统,允许保存旧版 ...
- Android Studio在Ubuntu下离线安装Gradle
更新android studio3.0后又要升级gradle了,估计又要很长时间,晚上临走前跟开始更新下载,第二天一早发现又卡了,吐血. 在某CSDN下载gradle-4.1-all.zip,直接手动 ...
- 统计List中相同的元素
public static <E> List<E> getCommonsElements(List<E> list) { return list.stream() ...
- tf.placeholde函数解释与用法
函数原型:tf.placeholder(dtype, shape=None, name=None) 使用说明:该函数用于得到传递进来的真实的训练样本.同时也可以理解为形参, 用于定义过程,在执行的时候 ...
- Codeforces 1169E DP
题意:给你一个长度为n的序列,有q次询问,每次询问给出两个位置x和y(x < y),问是否可从x到达y?可达的定义是:如果存在一个序列(假设长度为k),其中p1 = x, pk = y,并且这个 ...
- Android 增量更新完全解析 是增量不是热修复（转）
转自:http://blog.csdn.net/lmj623565791/article/details/52761658 本文在我的微信公众号:鸿洋(hongyangAndroid)首发. 转载请标 ...