模态框

务必将模态框的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">&times;</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-自带插件（完成的小功能）的更多相关文章

  1. 基于bootstrap的bootstrap-editable插件实现即时编辑功能

    1.引用基本css和js: <link href="bootstrap3/css/bootstrap.min.css" rel="stylesheet" ...

  2. Bootstrap常用的自带插件

    Bootstrap自带的那些常用插件. 模态框 模态框的HTML代码放置的位置 务必将模态框的HTML代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态 ...

  3. Bootstrap自带的那些常用插件

    1.Bootstrap自带的那些常用插件. 1.1模态框 模态框的HTML代码放置的位置 务必将模态框的HTML代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组 ...

  4. 【转载】利用Unity自带的合图切割功能将合图切割成子图

    虽然目前网上具有切割合图功能的工具不少,但大部分都是自动切割或者根据plist之类的合图文件切割的, 这种切割往往不可自己微调或者很难维调,导致效果不理想. 今天逛贴吧发现了一位网友写的切割合图插件很 ...

  5. Ubuntu13.04 Eclipse下编译安装Hadoop插件及使用小例

    Ubuntu13.04 Eclipse下编译安装Hadoop插件及使用小例 一.在Eclipse下编译安装Hadoop插件 Hadoop的Eclipse插件现在已经没有二进制版直接提供,只能自己编译. ...

  6. 使用bootstrap的JS插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  7. LoadRunner 自带订票系统flights 功能空白、1080端口被占用的解决办法

    LoadRunner 自带订票系统flights 功能空白.1080端口被占用的解决办法 安装LoadRunner8.1后运行Mercury Web Tours Application,点击fligh ...

  8. 用MVC5+EF6+WebApi 做一个小功能(三) 项目搭建

    一般一个项目开始之前都会有启动会,需求交底等等,其中会有一个环节,大讲特讲项目的意义,然后取一个高大上的项目名字,咱这是一个小功能谈不上项目,但是名字不能太小气了.好吧,就叫Trump吧.没有任何含义 ...

  9. bootstrap学习笔记 插件概述

    Bootstrap插件概览 在前面布局组件章节中所讨论的组件仅仅是个开始.Bootstrap自带的12种jQuery插件,扩展了功能,可以给站点添加更多的互动.即使您不是一名高级的js开发人员, 你也 ...

  10. 第二百四十三节，Bootstrap模态框插件

    Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一．基本使用 使用模态框 ...

随机推荐

  1. 关于java使用json不能够使用报没有导包的问题，以及前后台交互json数据的使用

    博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/12/02/%e5%85%b3%e4%ba%8ejava%e4%bd%bf%e7%94%a8 ...

  2. tushare积分怎么获得 tushare pro 积分充值 积分转让

    本人是做量化投资的,团队转型,换了交易策略,手头有多个离职同事的闲置转让.600分:原价50元,仅需39元1500分:原价150元,仅需109元(售罄)2000分:原价200元,仅需149元5000分 ...

  3. Django中的缓存机制

    概述       对于中等流量网站来说,尽可能的减少开销是必要的.缓存数据就是为了保存那些需要很多计算资源大的结果,这样的的话就不必在下次重复消耗计算资源.     Django自带了一个健壮的缓存系 ...

  4. [轉]udp_sendmsg空指针漏洞分析 by wzt

    udp_sendmsg空指针漏洞分析    by wzt 漏洞描述: 由于Linux ipv4协议栈中udp_sendmsg()函数设计上存在缺陷, 导致struct rtable *rt以空指针形式 ...

  5. CF1215D

    CF1215D 两个整数的和是偶数,他们的差也是偶数 博弈好难啊qaq 我好zz啊qaq 如果M放最后一个M胜 现在和比较大的一边如果空位还多的话M胜 M可以通过在大的那边放9来消掉那边所有的空 由于 ...

  6. 函数高阶（函数，改变函数this指向，高阶函数，闭包，递归）

    一.函数的定义方式 1.函数声明方式 function  关键字(命名函数) 2.函数表达式(匿名函数) 3.new  Function( ) var  fn = new  Function(‘参数1 ...

  7. Ti 949 配置 948 i2c

    如果不想用 远端 slave,只访问948   选 i2c pass through all =1  :i2c pass through =0/1 0x0c 0x17 0x9e 如果想用远端  sla ...

  8. 企业级NginxWeb服务优化实战（上）

    企业级NginxWeb服务优化实战(上) 1. Nginx基本安全优化 1.1 调整参数隐藏Nginx软件版本号信息 一般来说,软件的漏洞都和版本有关,这个很像汽车的缺陷,同一批次的要有问题就都有问题 ...

  9. C# 利用发射动态创建泛型类型的对象，泛型类型支持带惨的构造函数

    static class Program { static void Main(string[] args) { var aaa = Create<AAA>("aaa" ...

  10. spring boot 项目的创建

    一. 进入https://start.spring.io 快速创建项目 二. 利用eclipse sts插件创建项目 1. 安装sts插件 进入https://spring.io/tools3/sts ...