bootstrap组件2

<!DOCTYPE html>

<html lang="zh-cn">

<head >

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>bootstrap</title>

    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" >

    <!--[if lt IE 9]>

    <script src="../bootstrap/html5shiv.min.bootstrap"></script>

    <script src="../bootstrap/respond.min.bootstrap"></script>

    <![endif]-->

    <script src="../scripts/jquery-1.12.2.min.js" ></script>

    <script src="../bootstrap/js/bootstrap.min.js"></script>

</head>

<body class="container" style="padding-top: 30px; padding-bottom: 100px;">

<!--导航条详细版-->

<nav class="navbar navbar-default navbar-fixed-top ">

    <div class="container-fluid">

        <!--品牌-->

        <div class="navbar-header">

            <div class="navbar-brand">Bootstrap</div>

            <!--data-target="#divNav" 对应导航id   data-toggle="collapse" 展开效果-->

            <button data-target="#divNav" data-toggle="collapse" type="button" class="navbar-toggle">

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

        </div>

        <!--导航内容-->

        <div class="collapse navbar-collapse" id="divNav">

            <ul class="nav navbar-nav">

                <li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>

                <li><a href="#"><span class="glyphicon glyphicon-music"></span> Music</a></li>

                <li><p class="navbar-text">Search</p></li>

                <li>

                    <form class="navbar-form">

                        <input type="search" class="form-control" placeholder="Enter search" >

                        <button type="button" class="btn btn-primary">

                            <span class="glyphicon glyphicon-search"></span>

                        </button>

                    </form>

                </li>

                <li><a href="#" class="navbar-link">Help</a> </li>

            </ul>

            <!--两个右对齐-->

            <ul class="nav navbar-nav navbar-right">

                <li><a href="#"><span class="glyphicon glyphicon-home"></span> Email</a></li>

                <li><a href="#"><span class="glyphicon glyphicon-music"></span> About</a></li>

                <li><button type="button" class="btn btn-info navbar-btn">Suggess</button></li>

            </ul>

        </div>

    </div>

</nav>

<hr/>

<p class="page-header">大小屏幕排版</p>

<div class="row">

    <!--中屏幕各4列，小屏幕a占2列 b占10列 c占另起一行12列，-->

    <div class="col-md-4 col-sm-2">a</div>

    <div class="col-md-4 col-sm-10">b</div>

    <div class="col-md-4 col-sm-12">c</div>

    <hr/>

    <code>document.getElementById();</code>

    <p><kbd>ctrl</kbd>+<kbd>f5</kbd></p>

    <samp>var a = document.getElementById();</samp>

</div>

<hr/>

<p class="page-header">分页</p>

<div class="text-center">

    <ul class="pagination pagination-lg">

        <li><span >&laquo;</span></li>

        <li class="active"><a href="#">1</a></li>

        <li><a href="#">2</a></li>

        <li><a href="#">3</a></li>

        <li><a href="#">4</a></li>

        <li><a href="#">5</a></li>

        <li><span >&raquo;</span></li>

    </ul>

</div>

<script>

    $(".pagination li").click(function () {

        $(".pagination li").removeClass();  //单击时全移除样式

        $(this).addClass("active");  //  this 添加样式

    });

</script>

<hr/>

<!--徽章-->

<p>Email <span class="badge">33</span> </p>

<button type="button" class="btn btn-primary"> Email <span class="badge">33</span> </button>

<hr/>

<!--警告框 -->

<div class="alert alert-danger">

    <button data-dismiss="alert" class="close">&times;</button>

    <p>dangerous!<a href="#" class="alert-link">LINK</a></p>

</div>

<p class="page-header">进度条</p>

<div class="progress">

    <div class="progress-bar" style="width:30%">30%</div>

</div>

<div class="progress">

    <div class="progress-bar active progress-bar-danger progress-bar-striped" style="width:40%">40%</div>

</div>

<div class="progress">

    <div class="progress-bar active progress-bar-warning progress-bar-striped" style="width:40%">40%</div>

    <div class="progress-bar active progress-bar-danger progress-bar-striped" style="width:30%">30%</div>

</div>

<div id="divProgress" class="progress">

    <div id="divBar" class="progress-bar active progress-bar-danger progress-bar-striped" style="width:0%">0%</div>

</div>

<button id="btnStart" class="btn btn-primary">Start</button>

<script>

    $().ready(function () {

        var width=0;

        function changeBar(){

            $("#divBar").attr("style","width:"+width+"%").html(width+"%");

            if(width<100){

                width+=1;

            }

        }

        $("#btnStart").click(function () {

            setInterval(function () {     //多添加了一个函数 function(){changeBar();};

                changeBar();

            },100);   // 函数名要加  “”

        });

    });

</script>

    <div class="media">

        <div class="media-left"><img  src="../img/superman.jpg" class=" media-object"></div>

        <div class="media-body"><p class="media-heading">pic mes</p> </div>

    </div>

<p class="page-header">列表组</p>

    <div class="list-group">

        <!--<span class="media glyphicon">   不懂。。-->

        <span class="media glyphicon"><a class="list-group-item" href="#">文学类<sup><span class="badge">20</span></sup></a></span>

        <a class="list-group-item list-group-item-success" href="#">文学类<span class="badge">20</span> </a>

        <a class="list-group-item" href="#">文学类<span class="badge">20</span> </a>

        <a class="list-group-item" href="#">文学类<span class="badge">20</span> </a>

    </div>

<!--面板 -->

<p class="page-header">面板</p>

<div class="panel panel-info">

    <div class="panel-heading">123</div>

    <div class="panel-body">body</div>

    <div class="panel-footer text-right">时间</div>

</div>

<!--视频-->

<div class="embed-responsive embed-responsive-16by9">

    <iframe class="embed-responsive-item" src="..."></iframe>

</div>

<!--底部-->

<button type="button" class="btn btn-primary btn-block navbar-fixed-bottom">

    <span class="glyphicon glyphicon-log-in" ></span> button

</button>

<!--滚动监听-->

123

</body>

</html>
<!--看不出效果-->

    <h2 class="page-header">滚动监听</h2>

    <nav id="nav-test" class="navbar-default navbar">

        <ul class="nav navbar-nav">

            <li><a href="#ios">ios</a></li>

            <li><a href="#svn">svn</a></li>

        </ul>

    </nav>

    <div data-spy="scroll" data-target="nav-test" data-offset="0" style="height: 100px;overflow:auto;position: relative;">

        <h4 id="ios">ios</h4>

        <p>iOS是由苹果公司开发的移动操作系统[1]  。苹果公司最早于2007年1月9日的Macworld大会上公布这个系统，最初是设计给iPhone使用的，后来陆续套用到iPod touch、iPad以及Apple TV等产品上。iOS与苹果的Mac OS X操作系统一样，属于类Unix的商业操作系统。原本这个系统名为iPhone OS，因为iPad，iPhone，iPod touch都使用iPhone OS，所以2010WWDC大会上宣布改名为iOS（iOS为美国Cisco公司网络设备操作系统注册商标，苹果改名已获得Cisco公司授权）。iOS是由苹果公司开发的移动操作系统[1]  。苹果公司最早于2007年1月9日的Macworld大会上公布这个系统，最初是设计给iPhone使用的，后来陆续套用到iPod touch、iPad以及Apple TV等产品上。iOS与苹果的Mac OS X操作系统一样，属于类Unix的商业操作系统。原本这个系统名为iPhone OS，因为iPad，iPhone，iPod touch都使用iPhone OS，所以2010WWDC大会上宣布改名为iOS（iOS为美国Cisco公司网络设备操作系统注册商标，苹果改名已获得Cisco公司授权）。</p>

        <h4 id="svn">svn</h4>

        <p>所有的文档都显示SVN可以取代CVS，同时SVN的问题和缺点都被隐藏了。不幸的是，我们并不认为SVN是CVS的替代品，尽管很多缺陷都被修改了。更有甚者，它甚至让人重回CVS。CVS和SVN的比较类似于比较C++和Java。很明显CVS和SVN都远比SourceSafe强大的多，如同C++和Java比Basic强大的多。CVS代表了几乎代码控制系统的所有功能项，尽管有时他的实现并不很方便。SVN修正并添加了一些CVS并不拥有的功能。例如，创建标志和分支dubious，你在编辑文件时其他人不会有任何通知。SVN并不是CVS的替代品，只是个不同的系统，类似于CVS。它有些特有的功能，足以作为采用它的理由。这些功能使他更适合于开发环境，例如对PowerBuilder。下面你可以找到两者的相对优势、劣势。所有的文档都显示SVN可以取代CVS，同时SVN的问题和缺点都被隐藏了。不幸的是，我们并不认为SVN是CVS的替代品，尽管很多缺陷都被修改了。更有甚者，它甚至让人重回CVS。CVS和SVN的比较类似于比较C++和Java。很明显CVS和SVN都远比SourceSafe强大的多，如同C++和Java比Basic强大的多。CVS代表了几乎代码控制系统的所有功能项，尽管有时他的实现并不很方便。SVN修正并添加了一些CVS并不拥有的功能。例如，创建标志和分支dubious，你在编辑文件时其他人不会有任何通知。SVN并不是CVS的替代品，只是个不同的系统，类似于CVS。它有些特有的功能，足以作为采用它的理由。这些功能使他更适合于开发环境，例如对PowerBuilder。下面你可以找到两者的相对优势、劣势。</p>

    </div>

bootstrap组件 2的更多相关文章

  1. JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）

    前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...

  2. bootstrap学习笔记--bootstrap组件

    前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...

  3. bootstrap 组件

      bootstrap  组件 1下拉菜单(dropdown)  下拉菜单切换(dropdown-toggle)  下拉菜单对齐(dropdown-menu-right-右对齐) 下拉菜单分割线(di ...

  4. Bootstrap组件

    1.Bootstrap组件——Glyphicons图标字体 图标字体:可以表示的文字不是abcd或1234,而是一个又一个图形符号,比直接使用图片好处:可以任意放大不会失真:所有能使用文字的地方都可以 ...

  5. ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件

    阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...

  6. bootstrap组件学习

    转自http://v3.bootcss.com/components/ bootstrap组件学习 矢量图标的用法<span class="glyphicon glyphicon-se ...

  7. UIBootatrap:是由AngularJS UI团队编写的纯AngularJS实现的Bootstrap组件

    本文为翻译文档.原文是https://angular-ui.github.io/bootstrap/(需要FQ). 准备工作: 依赖关系:这个库中包含一组基于Bootstrap组件和CSS的原生Ang ...

  8. Angular -ui - BootStrap组件的解释以及使用

    关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件. 1. 关于ng-router(angular-router. ...

  9. python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

随机推荐

  1. IIS 处理请求 原理

    有时候我们会发现当我们访问一个IIS网站时,使用网址可以正常访问,但是使用IP却不行,这是什么原因呢? 原来IIS可以使用一个IP地址和端口绑定多个网站,这些网站的IP地址与端口都一样,因此在客户端或 ...

  2. 【leetcode】Regular Expression Matching

    Regular Expression Matching Implement regular expression matching with support for '.' and '*'. '.' ...

  3. NGUI Table页(UIToggle和UIToggledObjects)

    1.添加两个按钮Btn1和Btn2.添加2个Spr1和Spr2 2.给每个Btn添加两个脚本UIToggle和UIToggledObjects 3.将每个UIToggle的Group设置个非0的值 4 ...

  4. 22. javacript高级程序设计-高级技巧

    1. 高级技巧 1.1 函数 l 可以使用惰性载入函数,将任何分支推迟到第一个调用函数的时候 l 函数绑定可以让你创建始终在指定环境中运行的函数,同时函数柯里化可以让你创建已经填写了某些参数的函数 l ...

  5. NoSQL之【MongoDB】学习（二）：DML和查询操作说明

    摘要: 操作MongoDB的方法和关系型数据库差别很大,现在对他们进行说明,后期会逐步完善. ##开头表示MySQL** 开头表示MongoDB 创建: Mongodb:文档数据库,擅长存非结构化数据 ...

  6. ffmpeg-20160718-git-bin.7z

    官方 2016-07-18 发布的bin,彻底不支持 xp. ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 S 下一帧 [ -2秒 ] + ...

  7. Bootstrap modal垂直居中

    Bootstrap modal垂直居中   在网上看到有Bootstrap2的Modal dialog垂直居中问题解决方法,这种方法自己试了一下,并不能完全居中,并且窗口的大小不一样的话,每次显示的m ...

  8. UTF8编码转换(C#)

    例如: UTF8---ISO-8859-1 string string = "这是中文";Encoding utf8 = Encoding.UTF8; Encoding ISO = ...

  9. K3数据库表结构

    K3数据库表结构查看方法,直接在数据库中打开表 t_TableDescription,其中即各表及其与K3功能的对应关系 也可直接查询: select * from t_TableDescriptio ...

  10. 【python】为什么修改全局的dict变量不用global关键字

    转自:http://my.oschina.net/leejun2005/blog/145911?fromerr=qnPCgI19#OSC_h4_8 为什么修改字典d的值不用global关键字先声明呢? ...