logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

架构师之前端架构bootstrap(二)

 WindySky 2016-05-17
     1.前言.
       如题.
2.代码.
Java代码  收藏代码
  1. <!DOCTYPE html>  
  2. <!-- saved from url=(0123)file:///D:/user/SFIT0601/%E6%A1%8C%E9%9D%A2/Bootstrap%20%E5%8F%AF%E8%A7%86%E5%8C%96%E5%B8%83%E5%B1%80%E7%B3%BB%E7%BB%9F.htm -->  
  3. <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  4. <meta charset="utf-8">  
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6.   
  7. <meta name="title" content="Bootstrap可视化布局系统">  
  8. <meta name="description" content="可拖放排序在线编辑的Bootstrap可视化布局系统">  
  9. <meta name="keywords" content="可视化,布局,系统">  
  10. <title>Bootstrap 可视化布局系统</title>  
  11. <link href="http://www./try/bootstrap/layoutit/css/bootstrap-combined.min.css" rel="stylesheet">  
  12. <link href="http://www./try/bootstrap/layoutit/css/layoutit.css" rel="stylesheet">  
  13. <!--[if lt IE 9]>  
  14.         <script src="http://apps./libs/html5shiv/3.7/html5shiv.min.js"></script>  
  15.     <![endif]-->  
  16. <link rel="shortcut icon" href="./Bootstrap 可视化布局系统_files/favicon.png">  
  17. <script type="text/javascript" src="./Bootstrap 可视化布局系统_files/jquery.min.js"></script>  
  18. <!--[if lt IE 9]>  
  19.     <script type="text/javascript" src="http://apps./libs/jquery/1.9.1/jquery.min.js"></script>  
  20.     <![endif]-->  
  21. <script type="text/javascript" src="./Bootstrap 可视化布局系统_files/bootstrap.min.js"></script>  
  22. <script type="text/javascript" src="./Bootstrap 可视化布局系统_files/jquery-ui.min.js"></script>  
  23. <script type="text/javascript" src="./Bootstrap 可视化布局系统_files/jquery.ui.touch-punch.min.js"></script>  
  24. <script type="text/javascript" src="./Bootstrap 可视化布局系统_files/jquery.htmlClean.js"></script>  
  25. <!-- <script type="text/javascript" src="./Bootstrap 可视化布局系统_files/ckeditor.js"></script><style>.cke{visibility:hidden;}</style><style>.cke{visibility:hidden;}</style> -->  
  26. <!-- <script type="text/javascript" src="./Bootstrap 可视化布局系统_files/config.js"></script> -->  
  27. <!-- <script type="text/javascript" src="./Bootstrap 可视化布局系统_files/scripts.js"></script> -->  
  28. <!-- <script type="text/javascript" src="./Bootstrap 可视化布局系统_files/config(1).js"></script><link rel="stylesheet" type="text/css" href="./Bootstrap 可视化布局系统_files/editor.css"><script type="text/javascript" src="./Bootstrap 可视化布局系统_files/zh-cn.js"></script><script type="text/javascript" src="./Bootstrap 可视化布局系统_files/styles.js"></script><script type="text/javascript" src="./Bootstrap 可视化布局系统_files/config(2).js"></script><link rel="stylesheet" type="text/css" href="file:///D:/user/SFIT0601/%E6%A1%8C%E9%9D%A2/Bootstrap%20%E5%8F%AF%E8%A7%86%E5%8C%96%E5%B8%83%E5%B1%80%E7%B3%BB%E7%BB%9F_files/skins/moono/editor.css?t=D3NA"><script type="text/javascript" src="file:///D:/user/SFIT0601/%E6%A1%8C%E9%9D%A2/Bootstrap%20%E5%8F%AF%E8%A7%86%E5%8C%96%E5%B8%83%E5%B1%80%E7%B3%BB%E7%BB%9F_files/plugins/link/dialogs/link.js?t=D3NA"></script><link rel="stylesheet" type="text/css" href="file:///D:/user/SFIT0601/%E6%A1%8C%E9%9D%A2/Bootstrap%20%E5%8F%AF%E8%A7%86%E5%8C%96%E5%B8%83%E5%B1%80%E7%B3%BB%E7%BB%9F_files/skins/moono/dialog.css?t=D3NA"><script type="text/javascript" src="file:///D:/user/SFIT0601/%E6%A1%8C%E9%9D%A2/Bootstrap%20%E5%8F%AF%E8%A7%86%E5%8C%96%E5%B8%83%E5%B1%80%E7%B3%BB%E7%BB%9F_files/plugins/link/dialogs/anchor.js?t=D3NA"></script></head> -->  
  29. <body style='width:100%'>  
  30. <div class="container-fluid"  style='position:fixed; z-index:999; top:0;left:0;'>  
  31.     <div class="row-fluid" style='position:fixed; z-index:999; top:0;left:0;'>  
  32.         <div class="span12">  
  33.             <div class="navbar">  
  34.                 <div class="navbar-inner">  
  35.                     <div class="container-fluid">  
  36.                          <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> [url=#]网站名[/url]  
  37.                         <div class="nav-collapse collapse navbar-responsive-collapse">  
  38.                             <ul class="nav">  
  39.                                 <li class="active">  
  40.                                     [url=#]主页[/url]  
  41.                                 </li>  
  42.                                 <li>  
  43.                                     [url=#]链接[/url]  
  44.                                 </li>  
  45.                                 <li>  
  46.                                     [url=#]链接[/url]  
  47.                                 </li>  
  48.                                 <li class="dropdown">  
  49.                                      <a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单<strong class="caret"></strong></a>  
  50.                                     <ul class="dropdown-menu">  
  51.                                         <li>  
  52.                                             [url=#]下拉导航1[/url]  
  53.                                         </li>  
  54.                                         <li>  
  55.                                             [url=#]下拉导航2[/url]  
  56.                                         </li>  
  57.                                         <li>  
  58.                                             [url=#]其他[/url]  
  59.                                         </li>  
  60.                                         <li class="divider">  
  61.                                         </li>  
  62.                                         <li class="nav-header">  
  63.                                             标签  
  64.                                         </li>  
  65.                                         <li>  
  66.                                             [url=#]链接1[/url]  
  67.                                         </li>  
  68.                                         <li>  
  69.                                             [url=#]链接2[/url]  
  70.                                         </li>  
  71.                                     </ul>  
  72.                                 </li>  
  73.                             </ul>  
  74.                             <ul class="nav pull-right">  
  75.                                 <li>  
  76.                                     [url=#]右边链接[/url]  
  77.                                 </li>  
  78.                                 <li class="divider-vertical">  
  79.                                 </li>  
  80.                                 <li class="dropdown">  
  81.                                      <a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单<strong class="caret"></strong></a>  
  82.                                     <ul class="dropdown-menu">  
  83.                                         <li>  
  84.                                             [url=#]下拉导航1[/url]  
  85.                                         </li>  
  86.                                         <li>  
  87.                                             [url=#]下拉导航2[/url]  
  88.                                         </li>  
  89.                                         <li>  
  90.                                             [url=#]其他[/url]  
  91.                                         </li>  
  92.                                         <li class="divider">  
  93.                                         </li>  
  94.                                         <li>  
  95.                                             [url=#]链接3[/url]  
  96.                                         </li>  
  97.                                     </ul>  
  98.                                 </li>  
  99.                             </ul>  
  100.                         </div>  
  101.                     </div>  
  102.                 </div>  
  103.             </div>  
  104.         </div>  
  105.     </div>  
  106. </div>  
  107. </div>  
  108. </body>  

2.完整代码,请看附件下载.
3.可视化编辑地址
       http://www./try/bootstrap/layoutit/   

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： WindySky > 《bootstrap》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多