又爱又恨的BOOTSTRAP

搞本书,看了一天,确实,,UIKIT比它好用。。。

但,艺多不压身吧。

今天自己抄了个大概的,不用其它插件,,但那手风琴,真的找了很多,没有中意的。。。

 

<!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">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>Bootstrap 101 Template</title>

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

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
    <style type='text/css'>
      .footcolor {
        background-color: #CCC;
      }
            .glyphicon { margin-right:10px; }
            .panel-body { padding:0px; }
            .panel-body table tr td { padding-left: 15px }
            .panel-body .table {margin-bottom: 0px; }

    </style>
  <body>
        <div class="container">
            <nav class="navbar navbar-default navbar-inverse ">

                <!-- 此部分不论在任何宽度下都一直存在,常用来展开或收起导航 -->
                <div class="navbar-header">
                    <button class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
                        <i class="icon-bar"></i>
                        <i class="icon-bar"></i>
                        <i class="icon-bar"></i>
                    </button>
                    <a href="#" class="navbar-brand">brand</a>
                </div>

                <!-- 这部分才是真正的导航主体部分 -->
                <div id="navbar1" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="#">菜单</a>
                        </li>
                        <li>
                            <a href="#">菜单</a>
                        </li>
                        <li>
                            <a href="#">菜单</a>
                        </li>
                        <li>
                            <a href="#">菜单</a>
                        </li>
                        <li>
                            <a href="#">菜单</a>
                        </li>
                        <li>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Sandstone <span class="caret"></span></a>
                            <ul class="dropdown-menu" aria-labelledby="download">
                                <li><a href="http://jsfiddle.net/bootswatch/m0nv7a0o/">Open Sandbox</a></li>
                                <li class="divider"></li>
                                <li><a href="./bootstrap.min.css">bootstrap.min.css</a></li>
                                <li><a href="./bootstrap.css">bootstrap.css</a></li>
                                <li class="divider"></li>
                                <li><a href="./variables.less">variables.less</a></li>
                                <li><a href="./bootswatch.less">bootswatch.less</a></li>
                                <li class="divider"></li>
                                <li><a href="./_variables.scss">_variables.scss</a></li>
                                <li><a href="./_bootswatch.scss">_bootswatch.scss</a></li>
                            </ul>
                        </li>
            </nav>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-2">

                     <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close">
                            </span>Content</a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse">
                        <div class="panel-body">
                            <table class="table">
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-pencil text-primary"></span><a href="http://www.jquery2dotnet.com">Articles</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-flash text-success"></span><a href="http://www.jquery2dotnet.com">News</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-file text-info"></span><a href="http://www.jquery2dotnet.com">Newsletters</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-comment text-success"></span><a href="http://www.jquery2dotnet.com">Comments</a>
                                        <span class="badge">42</span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-th">
                            </span>Modules</a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body">
                            <table class="table">
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Orders</a> <span class="label label-success">$ 320</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Invoices</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Shipments</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Tex</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-user">
                            </span>Account</a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse">
                        <div class="panel-body">
                            <table class="table">
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Change Password</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Notifications</a> <span class="label label-info">5</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Import/Export</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-trash text-danger"></span><a href="http://www.jquery2dotnet.com" class="text-danger">
                                            Delete Account</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file">
                            </span>Reports</a>
                        </h4>
                    </div>
                    <div id="collapseFour" class="panel-collapse collapse">
                        <div class="panel-body">
                            <table class="table">
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-usd"></span><a href="http://www.jquery2dotnet.com">Sales</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-user"></span><a href="http://www.jquery2dotnet.com">Customers</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-tasks"></span><a href="http://www.jquery2dotnet.com">Products</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-shopping-cart"></span><a href="http://www.jquery2dotnet.com">Shopping Cart</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

                </div>
                <div class="col-md-10">

                    <div class="bs-component">

                        <h3>Heading 3</h3>
                        <ul class="nav nav-list">
                            <li class="divider"></li>
                        </ul>
                        <table class="table table-striped table-hover table-bordered">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Column heading</th>
                                    <th>Column heading</th>
                                    <th>Column heading</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                </tr>
                                <tr class="info">
                                    <td>3</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                </tr>
                                <tr class="success">
                                    <td>4</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                </tr>
                                <tr class="danger">
                                    <td>5</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                </tr>
                                <tr class="warning">
                                    <td>6</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                </tr>
                                <tr class="active">
                                    <td>7</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                </tr>
                            </tbody>
                        </table>
                    </div><!-- /example -->
                    <div class="bs-component text-center">
              <ul class="pagination">
                <li class="disabled"><a href="#">&laquo;</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="#">&raquo;</a></li>
              </ul>
                    </div>

                </div>
            </div>
        </div>

         <footer class="footer ">
      <div class="container text-center footcolor" >
        <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p><a href="http://glyphicons.com">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <ul class="list-inline">
          <li><a href="http://blog.getbootstrap.com">Blog</a></li>
          <li class="muted">&middot;</li>
          <li><a href="https://github.com/twbs/bootstrap/issues?state=open">Issues</a></li>
          <li class="muted">&middot;</li>
          <li><a href="https://github.com/twbs/bootstrap/releases">Changelog</a></li>
        </ul>
      </div>
    </footer>
    <script src="js/jquery-2.1.4.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
  </body>
</html>

时间: 2024-10-31 17:02:32

又爱又恨的BOOTSTRAP的相关文章

Webpack 爱与恨

关于标题,为什么是"爱与恨"? 因为在 webpack 刚出来的时候,我并不是坚定的支持者,有很多地方用起来不方便,api 设计不合理.随着 webpack 和 react 生态的越发完善,加上 webpack2.0 的发布,它的功能也越来越强大,让我又重新认识它. 内容提要 webpack 构建方案 webpack 生态 需求是什么 对比其他方案 webpack vs gulp webpack gulp 什么时候用 webpack 构建方案 webpack 生态 网上有好多介绍 we

《不一样的美男子》总导演专访:对百度大数据又爱又恨

导语:对于大数据的加入,湖南卫视自制剧<不一样的美男子>总导演丁仰国可是又爱又恨.爱的是,大数据不仅是一种技术还可以卖萌,让这部<不一样的美男子>成为中国第一部真正意义上的大数据偶像剧,实现了用户互动和市场收视率的双赢.而让导演苦恼的是:边拍边播模式让剧组受到了很大的挑战.<美男子>城市大数据:福建网民最给力"福建?这个数据太意外了!"当丁仰国看到记者手中百度风云榜大数据显示,福建网民对<不一样的美男子>搜索热度超过<爸爸去哪儿&g

世界上也许不会再有第二个浏览器让人如此又爱又恨

世界上也许不会再有第二个浏览器让人如此又爱又恨:作为世界上历史装机量最大,同时也是被吐槽最多的浏览器,IE 6在今日停止了更新.至此,这款曾占全球市场份额90%的浏览器已经走过了12年的岁月,见证了互联网世界的潮起潮落,种种兴衰. 自从Opera.Chrome.Firefox崛起后,IE 6似乎已经沦为了"爸爸妈妈的浏览器",让大家黑得不亦乐乎,甚至出现了专门吐槽IE 6的漫画和网站.到了最后,微软自己都受不了大家的冷嘲热讽,用广告和那些黑IE 6的人玩起了"互黑"

数据让你又爱又恨?浪潮SA5224M4让数据变为资产

庞大的数据量是企业的资源,也是包袱 在智慧时代,最宝贵财富莫过于数据.而现实中,庞大的数据保有量让企业又爱又恨,这其中很重要的原因,即大量温冷数据的存在.温冷数据数量庞大但访问率较低,也无法丢失或遗弃,必须确保用户需要时能够被找到.因此,对很多互联网公司而言,有限的IDC资源正在被海量的温冷数据把持着,和热点数据抢占计算和存储资源载体,最终导致热点数据的存储空间不足,访问延迟增加,用户体验度变差. 就像我们好不容易用手机摆拍了一张美图,猛然间看到存储空间不足的提示,"摆拍"变成了&qu

山寨自然也成了消费者和其他厂商又爱又恨的对象

在整个IT界内,凡是做消费电子投资的,不管对"山寨"多么不屑,但都不得不提防这个"门口野蛮人".在如今的电子书阅读器市场中,山寨自然也成了消费者和其他厂商又爱又恨的对象.记者从国家新闻出版总署近日召开的"书·报·刊数字化发展高峰论坛"上了解到,电子书数字出版将有准入标准.业内人士分析,此次"准入令"显然成为清理山寨电子书阅读器的信号. 新闻出版总署将建立 电子书数字出版准入制度国家新闻出版总署科技与数字出版司司长张毅君表示,目

让外资银行又爱又恨的互联网金融

利率市场化不断推进.互联网金融迅速崛起,包括社区银行.直销银行及混合互联网金融公司在内的一系列新型金融业务模式不断涌现,作为在财富管理领域耕耘多年的资深金融业参与者,外资银行同样开始面临新的挑战和压力. "从财富管理角度,无论是直销银行还是互联网金融,我们对此都是又爱又恨,它是整个银行业包括零售银行和财富管理发展中非常重要的新事物."汇丰中国零售银行及财富管理业务总监李峰日前在接受<第一财经日报>记者采访时表示,多数客户在进行财富规划时是希望得到有益的建议,因此丰富产品销售

alexa排名让站长又爱又恨

摘要: alexa排名这个东西真是让站长又爱又恨.说它重要吧,其实真正的业内人士都明白,这个完全是比拼alexa工具条的一场闹剧:但是说它不重要吧,无数老板却却非常看重它.相信有许多朋 alexa排名这个东西真是让站长又爱又恨.说它重要吧,其实真正的业内人士都明白,这个完全是比拼alexa工具条的一场闹剧:但是说它不重要吧,无数老板却却非常看重它.相信有许多朋友在公司里背负着提升alexa排名的重担,那么如何安全的提升一个网站的alexa排名呢?(注意:我们这里说的是安全提升alexa排名,绝不

电商渠道为何令智能电视厂商又爱又恨?

元旦一过,春节还有多久?又到年尾,各大媒体已经开始紧锣密鼓地准备新闻大盘点,对全年的新闻事件.明星产品.热门新型产业进行一次总结.智能电视作为2013硬件领域最为火热的产品之一,自然是入驻了不少媒体的年终盘点当中,这对于和笔者一样希望更大程度上全面的了解一个产业的人来说,无疑是一次绝佳的学习机会. 互联网思维沦为山炮词 电商渠道优势或为厂商新口头禅 就智能电视而言,纵然不看年终盘点,"互联网思维"这一已经逐渐沦为山炮名词的背后,智能电视厂商们也起到了"推波助澜"的作

服装企业对电子商务的爱与恨

   "今天你网购了吗?"据统计,电子商务在2009年全年的交易额达到了3.3亿人民币,其中网络零售市场规模达到2400多亿人民币.这2400多亿是什么概念呢?相当于中国网民在线消费的1/3:对于占据中国零售业半壁江山的服装企业来说,电子商务无异于一把金钥匙,打开的将是潜力巨大的网络零售金库.   新挑战:传统销售渠道与电子商务的竞争      2400多亿的网络零售市场是一块巨大的蛋糕,无论是个人创业者.创业团队,还是传统企业都希望从中分得一杯羹,通过网络零售而获取价值.而对于服装企