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, 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-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, 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></div><!-- 折叠卡 -->

原文地址：https://www.cnblogs.com/ant137/p/9369145.html