zoukankan      html  css  js  c++  java
  • 网页基础布局

    <div class="container-fluid">
    <div class="row-fluid">
    <div class="span12">
    <div class="navbar">
    <div class="navbar-inner">
    <div class="container-fluid">
    <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a> <a href="#" class="brand">网站名</a>
    <div class="nav-collapse collapse navbar-responsive-collapse">
    <ul class="nav">
    <li class="active">
    <a href="#">主页</a>
    </li>
    <li>
    <a href="#">链接</a>
    </li>
    <li>
    <a href="#">链接</a>
    </li>
    <li class="dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单<strong class="caret"></strong></a>
    <ul class="dropdown-menu">
    <li>
    <a href="#">下拉导航1</a>
    </li>
    <li>
    <a href="#">下拉导航2</a>
    </li>
    <li>
    <a href="#">其他</a>
    </li>
    <li class="divider">
    </li>
    <li class="nav-header">
    标签
    </li>
    <li>
    <a href="#">链接1</a>
    </li>
    <li>
    <a href="#">链接2</a>
    </li>
    </ul>
    </li>
    </ul>
    <ul class="nav pull-right">
    <li>
    <a href="#">右边链接</a>
    </li>
    <li class="divider-vertical">
    </li>
    <li class="dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单<strong class="caret"></strong></a>
    <ul class="dropdown-menu">
    <li>
    <a href="#">下拉导航1</a>
    </li>
    <li>
    <a href="#">下拉导航2</a>
    </li>
    <li>
    <a href="#">其他</a>
    </li>
    <li class="divider">
    </li>
    <li>
    <a href="#">链接3</a>
    </li>
    </ul>
    </li>
    </ul>
    </div>

    </div>
    </div>

    </div>
    </div>
    </div>
    <div class="row-fluid">
    <div class="span2">
    <div class="tabbable" id="tabs-466579">
    <ul class="nav nav-tabs">
    <li>
    <a href="#panel-676119" data-toggle="tab">第一部分</a>
    </li>
    <li class="active">
    <a href="#panel-74858" data-toggle="tab">第二部分</a>
    </li>
    </ul>
    <div class="tab-content">
    <div class="tab-pane" id="panel-676119">
    <p>
    第一部分内容.
    </p>
    </div>
    <div class="tab-pane active" id="panel-74858">
    <p>
    第二部分内容.
    </p>
    </div>
    </div>
    </div>
    </div>
    <div class="span6">
    <div class="accordion" id="accordion-587361">
    <div class="accordion-group">
    <div class="accordion-heading">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-587361" href="#accordion-element-592183">选项卡 #1</a>
    </div>
    <div id="accordion-element-592183" class="accordion-body collapse">
    <div class="accordion-inner">
    功能块...
    </div>
    </div>
    </div>
    <div class="accordion-group">
    <div class="accordion-heading">
    <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion-587361" href="#accordion-element-942260">选项卡 #2</a>
    </div>
    <div id="accordion-element-942260" class="accordion-body collapse">
    <div class="accordion-inner">
    功能块...
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="span4">
    <a id="modal-864394" href="#modal-container-864394" role="button" class="btn" data-toggle="modal">触发遮罩窗体</a>

    <div id="modal-container-864394" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">
    标题栏
    </h3>
    </div>
    <div class="modal-body">
    <p>
    显示信息
    </p>
    </div>
    <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button> <button class="btn btn-primary">保存设置</button>
    </div>
    </div>
    </div>
    </div>
    </div>

  • 相关阅读:
    【Java-JVM】定量分析解决OutOfMemoryError: PermGen space, 来看科学量化分析
    Oracle11g 主机身份证明问题
    html标签的嵌套规则
    提高程序员职场价值的10大技巧
    IT人应当知道的10个行业小内幕
    趣文:如果编程语言是车
    去除inline-block元素间间距的N种方法
    《大型网站SEO优化实践》学习分享
    如何通过预加载器提升网页加载速度
    网页爬虫及其用到的算法和数据结构
  • 原文地址:https://www.cnblogs.com/lemonlemontree/p/6931286.html
Copyright © 2011-2022 走看看