学习一:Bootstrap(简单的开发模板)---响应式开发,移动设备优先

核心:栅格系统全局CSS样式组件JS插件  

参考官网模板,gulp.jsGhost 的自定义简单模板

<!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">

    <title>标题</title>

    <meta name="description" content="描述">
    <meta name="keywords" content="关键字">
    <meta name="author" content="lwucoder">

    <!-- icon图标 -->
    <link rel="icon" href="favicon.ico">

    <!-- Bootstrap核心CSS -->
    <link rel="stylesheet" href="bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="highlight.js/8.5/styles/monokai_sublime.min.css">
    <!-- 此页面的自定义样式-->
    <link rel="stylesheet" href="css/style.css">

    <!-- HTML5 shim 和 Respond.js 让IE8支持HTML5元素和媒体查询 -->
    <!--[if lt IE 9]>
      <script src="html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="home-template">
    <!-- start header -->
    <header class="main-header"  style="background-image: url(.jpg)"">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">

                    <!-- start logo -->
                    <a class="branding" href="#" title="name"><img src=".png" alt="name"></a>
                    <!-- end logo -->
                    <h2 class="text-hide">隐藏文本</h2>
                    <img src=".jpg" alt="隐藏图片" class="hide">
                </div>
            </div>
        </div>
    </header>
    <!-- end header -->

    <!-- start navigation -->
    <nav class="main-navigation">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="navbar-header">
                        <span class="nav-toggle-button collapsed" data-toggle="collapse" data-target="#main-menu">
                        <span class="sr-only">Toggle navigation</span>
                        <i class="fa fa-bars"></i>
                        </span>
                    </div>
                    <div class="collapse navbar-collapse" id="main-menu">
                        <ul class="menu">
                   <li class="nav-current" role="presentation"><a href="/">首页</a></li>
                   <li  role="presentation"><a href="#">论坛</a></li>
                   <li  role="presentation"><a href="#">快捷手册</a></li>
                   <li  role="presentation"><a href="#">中文文档</a></li>
                   <li  role="presentation"><a href="#">下载</a></li>
                   <li  role="presentation"><a href="#">关于</a></li>
              </ul>   
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <!-- end navigation -->
    <!--start main -->
    <section>
      <div class="container">
        <div class="row">
          <main class="col-md-8 main-content">
          </main>
          <aside class="col-md-4 sidebar">
          </aside>
        </div>
      <div>
    </section>
    <!--end main -->
    <!--start footer -->
    <footer class="footer">
        <div class="container">
            <p>© XXXXXXXXX</p>
            <p><a href="#" target="_blank">粤ICP备00000000号</a> | 粤公网安备0000000000</p>
        </div>
    </footer>
    <!--end footer -->

     <!--IE10视口Surface或桌面Windows 8的bug -->
    <script src="js/ie10-viewport-bug-workaround.js"></script>
    <script src="highlight.js/8.4/highlight.min.js"></script>
    <script>
        hljs.initHighlightingOnLoad();
    </script>  
    <!--先引入jquery-->
    <script src="jquery/1.11.3/jquery.min.js"></script>  
    <!--再引入Bootstrap的核心js -->
    <script src="bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

</html>
posted @ 2017-04-07 16:46  lwucoder  阅读(5445)  评论(0编辑  收藏  举报