zoukankan      html  css  js  c++  java
  • (转)Bootstrap 之 Metronic 模板的学习之路

    https://segmentfault.com/a/1190000006697252

    body 的组成结构

    body 部分包含了 HEADER、CONTAINER、FOOTER,其中 CONTAINER 部分又包含了 SIDEBAR、CONTENT、QUICK SIDEBAR 几个部分。body部分源码折叠后截图如下:

    Header 页面顶部

    Header contains of logo and top menu bar and it used in all pages.

    页面顶部(或头部)应用于所有的页面,包含 logo 、顶部菜单栏等。

    代码如下图(已折叠,下文同):

    从截图可见,在 header 结束后,有个 header 和 content 的分割,其 class="clearfix" 主要是清除浮动用,这样上下两块内容就相对独立,方便布局。

    Sidebar 侧边栏

    Sidebar contains of quick search form and main navigation menu.

    侧边栏包含快速搜索和主要的导航菜单。

    代码如下图:

    Content 内容

    Content consists of page title, breadcrumbs and page's main body.

    展示截图:

    代码截图:

    Quick Sidebar 快捷栏

    Quick Sidebar contains of user chat, notifications and general settings form.

    展示截图:

    代码截图:

    Footer 页面底部

    展示截图:

    代码截图:

     

  • 相关阅读:
    用Creator实现一个擀面的效果
    游戏开发中的多语言处理
    Docker(六)容器数据卷
    Docker(五)Docker镜像讲解
    Docker(四)Docker镜像安装
    Docker(三)Docker常用命令
    Docker(二)Docker配置
    nginx 与 tomcat 组合搭建web服务
    Zookeeper 使用
    tomcat-manager 设置
  • 原文地址:https://www.cnblogs.com/telwanggs/p/7065320.html
Copyright © 2011-2022 走看看