专栏首页sktjbootstrap3 上中下页面布局

bootstrap3 上中下页面布局

上:菜单

中:内容

下:内容

页脚

<head> </head>

<body>
    #菜单
    <header role="banner">
        <nav role="navigation" class="navbar navbar-static-top navbar-default">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="index.html"><img src="img/logo.png" alt="Bootstrappin'" width="120"></a>
            </div>
            <div class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="index.html">
                    <span class="icon fa fa-home"></span> Home
                </a></li>
                <li><a href="#">
                    <span class="icon fa fa-desktop"></span> Portfolio
                </a></li>
                <li><a href="#">
                    <span class="icon fa fa-group"></span> Team
                </a></li>
                <li><a href="#">
                    <span class="icon fa fa-envelope"></span> Contact
                </a></li>
              </ul>
            </div><!--/.nav-collapse -->
          </div><!--/.container -->
        </nav>
    </header>
    #页面布局:分为两部分
    <main role="main">

        <div class="page-contents container">
        <div class="row">
            <div class="col-sm-4">
              
            </div>
            <div class="col-sm-4">
                
            </div>
            <div class="col-sm-4">
                
            </div>
        </div><!-- /.row -->
        </div><!-- /.container -->
    </main>
    #页脚
    <footer role="contentinfo">

    </footer>
</body>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • python flask web开发实战 bootstrap

    from flask.ext.bootstrap import Bootstrap

    用户5760343
  • bootstrap 模态弹出框 常用**

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • bootstrap 超大屏幕样式

    <div class="container"> <div class="jumbotron"> <h1>欢迎登陆页面!</h1> <p>这是一个超大屏幕(...

    用户5760343
  • 25、商品详情页

    (1)复制一份test.vue文件并重命名为goodsDetail作为我们的商品详情页面

    Ewall
  • python flask web开发实战 bootstrap

    from flask.ext.bootstrap import Bootstrap

    用户5760343
  • 日期时间选择器、Bootstrap日期和时间表单组件。bootstrap-datetimepicker实现年月日,时分秒的选择。

    参考链接:http://www.bootcss.com/p/bootstrap-datetimepicker/

    别先生
  • flask-bootstrap安装与使用

     Bootstrap(http://getbootstrap.com/)是Twitter 开发的一个开源框架,它提供的用户界面组件可用于创建整洁且具有吸引力的网...

    菲宇
  • 基于django的个人博客网站建立(三)

    首先我希望主页面是显示我的所有文章,于是在主页面的视图函数中返回了所有的文章对象:

    py3study
  • flask第35篇——模板项目实战(一)

    上面代码综合了之前学过的知识,包括:flask for 循环、set模板赋值其余都是前端的内容,这里不做过多的阐述。

    用户2149234
  • java实现短信验证码登陆 demo

    我们使用的API平台是:秒嘀云: https://sms.miaodiyun.com/login.html

    故久

扫码关注云+社区

领取腾讯云代金券