bootstrap常用功能

<!-- 首页轮换图片 --><div id="image-trun" class="carousel slide" data-ride="carousel">    <!-- Indicators -->    <ol class="carousel-indicators">        <li data-target="#image-trun" data-slide-to="0" class="active"></li>        <li data-target="#image-trun" data-slide-to="1"></li>        <li data-target="#image-trun" data-slide-to="2"></li>    </ol>    <!-- Wrapper for slides -->    <div class="carousel-inner" role="listbox">        <div class="item active">            <img src="/static/images/website/1.jpg" alt="呵呵">            <div class="carousel-caption">轮换图片1</div>        </div>        <div class="item">            <img src="/static/images/website/2.jpg" alt="哈哈">            <div class="carousel-caption">轮换图片2</div>        </div>        <div class="item">            <img src="/static/images/website/3.jpg" alt="拉拉">            <div class="carousel-caption">轮换图片3</div>        </div>    </div>    <!-- Controls -->    <a class="left carousel-control" href="#image-trun" role="button" data-slide="prev">        <span class="glyphicon glyphicon-chevron-left"></span>        <span class="sr-only">上一个</span>    </a>    <a class="right carousel-control" href="#image-trun" role="button" data-slide="next">        <span class="glyphicon glyphicon-chevron-right"></span>        <span class="sr-only">下一个</span>    </a></div><!-- 轮换图片 --><!-- 分页+翻页  控制分页大小  pagination-lg  pagination-sm --><div class="row">    <ul class="pagination">        <li class="disabled"><a href="">?</a><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><a href="">6</a><li>        <li><a href="">7</a><li>        <li><a href="">8</a><li>        <li><a href="">?</a><li>    </ul>    <div class="row">        <ul class="pager">            <li class="previous"><a href="#">上一页</a></li>            <li class="next"><a href="">下一页</a></li>        </ul>    </div></div><!-- 分页 --><!-- 弹出框  --><li><a href="#" data-target="#about" data-toggle="modal">关于</a></li> <!--  一个data-target 属性指向对应的id即可 --><div class="modal fade" id="about">    <div class="modal-dialog">        <div class="modal-content">            <div class="modal-heading">                <button type="button" class="close" data-dismiss="modal">                    <span style="padding-right:10px;" aria-hidden="true">×</span>                    <span class="sr-only">Close</span>                </button>                <h3 class="feature-heading">传销<span class="text-muted">扰乱社会经济秩序影响安定团结</span></h3>            </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><!-- 弹出框 --><!-- 选项卡 --><div class="container">    <ul class="nav nav-tabs" role="tablelist">        <li class="active"><a href="#linux" role="tab" data-toggle="tab">Linux</a></li>        <li><a href="#apache" role="tab" data-toggle="tab">Apache</a></li>        <li><a href="#php" role="tab" data-toggle="tab">PHP</a></li>        <li><a href="#mysql" role="tab" data-toggle="tab">MySql</a></li>        <li><a href="#html" role="tab" data-toggle="tab">HTML</a></li>        <li><a href="#css" role="tab" data-toggle="tab">CSS</a></li>    </ul>    <div class="tab-content">        <div class="tab-pane active" id="linux">            <div class="row feature">                <div class="col-md-8">                    <h1 class="feature-heading">Linux<span class="text-muted">操作系统</span></h1>                    <p>Linux是一套免费使用和自由传播的类Unix操作系统，是一个基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的操作系统。                    它能运行主要的UNIX工具软件、应用程序和网络协议。它支持32位和64位硬件。Linux继承了Unix以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。</p>                    <p>Linux是一款免费的操作系统，用户可以通过网络或其他途径免费获得，并可以任意修改其源代码。                    这是其他的操作系统所做不到的。正是由于这一点，来自全世界的无数程序员参与了Linux的修改、编写工作，程序员可以根据自己的兴趣和灵感对其进行改变，                    这让Linux吸收了无数程序员的精华，不断壮大。</p>                </div>                <div class="col-md-4"><img class="feature-image img-responsive" src="/img/linux.png" /></div>            </div>        </div>        <div class="tab-pane" id="apache">            <div class="row feature">                <div class="col-md-4"><img class="feature-image img-responsive" src="/img/apache.jpg" /></div>                <div class="col-md-8">                    <h1 class="feature-heading">Apache<span class="text-muted">Web服务器</span></h1>                    <p>Apache HTTP Server（简称Apache）是Apache软件基金会的一个开放源码的网页服务器，可以在大多数计算机操作系统中运行，                    由于其多平台和安全性被广泛使用，是最流行的Web服务器端软件之一。它快速、可靠并且可通过简单的API扩展，将Perl/Python等解释器编译到服务器中。</p>                    <p>Apache源于NCSAhttpd服务器，经过多次修改，成为世界上最流行的Web服务器软件之一。Apache取自“a patchy server”的读音，                    意思是充满补丁的服务器，因为它是自由软件，所以不断有人来为它开发新的功能、新的特性、修改原来的缺陷。                    Apache的特点是简单、速度快、性能稳定，并可做代理服务器来使用</p>                </div>            </div>        </div>        <div class="tab-pane" id="php">            <div class="row feature">                <div class="col-md-8">                    <h1 class="feature-heading">PHP<span class="text-muted">开源脚本语言</span></h1>                    <p>Hypertext Preprocessor，中文名：“超文本预处理器”.语法吸收了C语言、Java和Perl的特点，易于学习，使用广泛，主要适用于Web开发领域。</p>                    <p>PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。                    用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML（标准通用标记语言下的一个应用）文档中去执行，                    执行效率比完全生成HTML标记的CGI要高许多；PHP还可以执行编译后代码，编译可以达到加密和优化代码运行，使代码运行更快。</p>                </div>                <div class="col-md-4"><img class="feature-image img-responsive" src="/img/pho.png" /></div>            </div>        </div>        <div class="tab-pane" id="mysql">            <div class="row feature">                <div class="col-md-4"><img class="feature-image img-responsive" src="/img/mysql.jpg" /></div>                <div class="col-md-8">                    <h1 class="feature-heading">MySql<span class="text-muted">关系型数据库管理系统</span></h1>                    <p>MySQL是一个开放源码的小型关联式数据库管理系统，开发者为瑞典MySQL AB公司。MySQL被广泛地应用在Internet上的中小型网站中。由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，许多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据库。</p>                    <p>MySQL是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。</p>                </div>            </div>        </div>        <div class="tab-pane" id="html">            <div class="row feature">                <div class="col-md-8">                    <h1 class="feature-heading">HTML<span class="text-muted">超文本标记语言</span></h1>                    <p>网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。</p>                    <p>超级文本标记语言是一种规范，一种标准，                    它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果</p>                </div>                <div class="col-md-4"><img class="feature-image img-responsive" src="/img/html.png" /></div>            </div>        </div>        <div class="tab-pane" id="css">            <div class="row feature">                <div class="col-md-4"><img class="feature-image img-responsive" src="/img/css.png" /></div>                <div class="col-md-8">                    <h1 class="feature-heading">CSS<span class="text-muted">级联样式表</span></h1>                    <p>它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>                    <p>CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，                    CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，                    是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。                    </p>                </div>            </div>        </div>    </div><hr /></div><!-- 选项卡 --><!-- 路径导航 --><div class="container">    <ol class="breadcrumb">        <li><a href="#">首页</a></li>        <li class="active">列表页</li>    </ol></div><!-- 路径导航 --><!-- 徽章图标 --><div class="row">    <div class="btn-group pull-left">        <button type="button" class="btn btn-default">            <span class="glyphicon glyphicon-thumbs-up"></span> 牛逼        </button>        <button type="button" class="btn btn-default">            <span class="glyphicon glyphicon-thumbs-down"></span> 苦逼        </button>        <button type="button" class="btn btn-default">            <span class="glyphicon glyphicon-hand-up"></span> 逗逼        </button>        <button type="button" class="btn btn-default">            <span class="glyphicon glyphicon-hand-down"></span> 傻逼        </button>    </div>    <div class="btn-group pull-right">        <button type="button" class="btn btn-default">            <span class="glyphicon glyphicon-download-alt"></span> 下载        </button>        <button type="button" class="btn btn-default">            <span class="glyphicon glyphicon-share"></span> 分享        </button>        <button type="button" class="btn btn-default">            <span class="glyphicon glyphicon-heart-empty"></span> 收藏        </button>    </div></div><!-- 徽章图标 --><!-- 气泡通知 --><ul class="nav navbar-nav">    <li class="active"><a href="#">开始</a></li>    <li><a href="#">CSS</a></li>    <li><a href="#">Javascript</a></li>    <li><a href="#">订单 <span class="badge">10</span></a></li>    <li><a href="#">留言 <span class="badge">25</span></a></li>    <li><a href="#about">关于</a></li></ul><!-- 气泡通知 --><!-- 折叠卡 控制折叠卡的开关 in>>样式  --><div class="col-md-4">    <div class="panel-group" id="accordion" role="tablist" aria-multiselectbale="true">        <div class="panel panel-default">            <div class="panel-heading">                <h3 class="panel-title">                    <a data-toggle="collapse" data-parent="#accordion" href="#panel-one" aria-expanded="true" aria-controls="panel-one">这里是标题</a>                </h3>            </div>            <div id="panel-one" class="panel-collapse collapse in" role="tabpanel">                <div class="panel-body">                    Anim pariatur cliche reprehenderit,enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,raw denim aesthetic synth nesciunt you probably haven‘t heard of them accusamus labore sustainable VHS.                </div>            </div>        </div>        <div class="panel panel-default">            <div class="panel-heading">                <h3 class="panel-title">                    <a data-toggle="collapse" data-parent="#accordion" href="#panel-two" aria-expanded="true" aria-controls="panel-two">这里是标题</a>                </h3>            </div>            <div id="panel-two" class="panel-collapse collapse in" role="tabpanel">                <div class="panel-body">                    Anim pariatur cliche reprehenderit,raw denim aesthetic synth nesciunt you probably haven‘t heard of them accusamus labore sustainable VHS.                </div>            </div>        </div>        <div class="panel panel-default">            <div class="panel-heading">                <h3 class="panel-title">                    <a data-toggle="collapse" data-parent="#accordion" href="#panel-three" aria-expanded="true" aria-controls="panel-three">这里是标题</a>                </h3>            </div>            <div id="panel-three" class="panel-collapse collapse in" role="tabpanel">                <div class="panel-body">                    Anim pariatur cliche reprehenderit,raw denim aesthetic synth nesciunt you probably haven‘t heard of them accusamus labore sustainable VHS.                </div>            </div>        </div>    </div></div><!-- 折叠卡 -->