metronic-Website Template
2015-03-26 21:55
54 查看
模板结构
所有的模板文件都有固定的结构组成,如header, slider-main, container 和 footer,如下所示开始页
使用下面的代码在所有HTML页面 检测ie浏览器版本 设置spesific类应用到Internet Explorer的不同版本。<!DOCTYPE html> <!--[if IE 8]> <html lang="en" class="ie8"> <![endif]--> <!--[if IE 9]> <html lang="en" class="ie9"> <![endif]--> <!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
标题页
页头中包含元数据,javascript和css文件:<head> <meta charset="utf-8" /> <title>Metronic Frotnend | Homepage</title> <meta content="width=device-width, initial-scale=1.0" name="viewport" /> <meta content="" name="description" /> <meta content="" name="author" /> <!-- BEGIN GLOBAL MANDATORY STYLES --> <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/> <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/> <!-- END GLOBAL MANDATORY STYLES --> <!-- BEGIN PAGE LEVEL PLUGIN STYLES --> <link href="assets/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet" /> <link rel="stylesheet" href="assets/plugins/revolution_slider/css/rs-style.css" media="screen"> <link rel="stylesheet" href="assets/plugins/revolution_slider/rs-plugin/css/settings.css" media="screen"> <link href="assets/plugins/bxslider/jquery.bxslider.css" rel="stylesheet" /> <!-- END PAGE LEVEL PLUGIN STYLES --> <!-- BEGIN THEME STYLES --> <link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css"/> <link href="assets/css/style.css" rel="stylesheet" type="text/css"/> <link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css"/> <link href="assets/css/themes/blue.css" rel="stylesheet" type="text/css" id="style_color"/> <!-- END THEME STYLES --> <link rel="shortcut icon" href="favicon.ico" /> </head>
头部
标题包含徽标和顶部的菜单栏,它使用在所有页面。代码:<div class="header navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> </div> <!-- BEGIN TOP NAVIGATION MENU --> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> </ul> </div> <!-- BEGIN TOP NAVIGATION MENU --> </div> </div>
滑块
<!-- BEGIN REVOLUTION SLIDER --> <div class="fullwidthbanner-container slider-main margin-bottom-10"> <div class="fullwidthabnner"> <div class="tp-bannertimer tp-bottom"></div> </div> </div> <!-- END REVOLUTION SLIDER -->
内容
内容包括页面标题、页面的主体。代码如下所示:<!-- BEGIN CONTAINER --> <div class="container"> </div> <!-- END CONTAINER -->
页尾
<!-- BEGIN FOOTER --> <div class="footer"> <div class="container"> </div> </div> <!-- END FOOTER --> <!-- BEGIN COPYRIGHT --> <div class="copyright"> <div class="container"> </div> </div> <!-- END COPYRIGHT -->
页尾(javascript)
Javascript文件加载到页底。 这将降低页面的加载时间。<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) --> <!-- BEGIN CORE PLUGINS --> <script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script> <script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <script type="text/javascript" src="assets/plugins/back-to-top.js"></script> <script type="text/javascript" src="assets/plugins/fancybox/source/jquery.fancybox.pack.js"></script> <script type="text/javascript" src="assets/plugins/hover-dropdown.js"></script> <script type="text/javascript" src="assets/plugins/revolution_slider/rs-plugin/js/jquery.themepunch.plugins.min.js"></script> <script type="text/javascript" src="assets/plugins/revolution_slider/rs-plugin/js/jquery.themepunch.revolution.min.js"></script> <!--[if lt IE 9]> <script src="assets/plugins/respond.min.js"></script> <![endif]--> <!-- END CORE PLUGINS --> <script src="assets/plugins/jquery-1.10.1.min.js" type="text/javascript"></script> <script type="text/javascript" src="assets/plugins/bxslider/jquery.bxslider.js"></script> <script src="assets/scripts/app.js"></script> <script src="assets/scripts/index.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { App.init(); App.initBxSlider(); Index.initRevolutionSlider(); }); </script> <!-- END JAVASCRIPTS -->
HTML代码注释示例
html、css和javascript:<!-- BEGIN LOGO (you can use logo image instead of text)--> <a class="navbar-brand logo-v1" href="index.html"> <img src="assets/img/logo_blue.png" id="logoimg" alt=""> </a> <!-- END LOGO -->CSS代码注释示例
/******************** GENERAL LAYOUT *********************/ /*** Top Bar ***/ .front-topbar { padding: 3px 0; background: #eee; } /*Social Icons*/ .front-topbar .social-icons li { margin-bottom: 0; }
3.字体
Metronic uses Open Sans font from google fonts. The font imported in main css file: assets/css/style.cssLoad Open Sans Font From Local
/*** Import fonts ***/ @import url(../fonts/font.css);
1./*** 2.Import fonts 3.***/ 4.@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);Extended Cyrillic Language Support
/*** Import fonts ***/ @import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=latin,cyrillic-ext);Extended Greek Language Support
/*** Import fonts ***/ @import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=latin,greek-ext);Extended Vietnamese Language Support
/*** Import fonts ***/ @import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=latin,vietnamese);
主题&布局配置
安装主题
CSS文件加载顺序应遵循如下所示<head> <meta charset="utf-8" /> <title>Metronic Frotnend | Homepage</title> <meta content="width=device-width, initial-scale=1.0" name="viewport" /> <meta content="" name="description" /> <meta content="" name="author" /> <!-- BEGIN GLOBAL MANDATORY STYLES --> <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/> <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/> <!-- END GLOBAL MANDATORY STYLES --> <!-- BEGIN PAGE LEVEL PLUGIN STYLES --> <link href="assets/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet" /> <link rel="stylesheet" href="assets/plugins/revolution_slider/css/rs-style.css" media="screen"> <link rel="stylesheet" href="assets/plugins/revolution_slider/rs-plugin/css/settings.css" media="screen"> <link href="assets/plugins/bxslider/jquery.bxslider.css" rel="stylesheet" /> <!-- END PAGE LEVEL PLUGIN STYLES --> <!-- BEGIN THEME STY 4000 LES --> <link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css"/> <link href="assets/css/style.css" rel="stylesheet" type="text/css"/> <link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css"/> <link href="assets/css/themes/blue.css" rel="stylesheet" type="text/css" id="style_color"/> <!-- END THEME STYLES --> <link rel="shortcut icon" href="favicon.ico" /> </head>
标题栏
顶栏包含联系信息、社会联系等顶栏选项
<!-- BEGIN TOP BAR --> <div class="front-topbar"> <div class="container"> <div class="row"> <div class="col-md-6"> <ul class="list-unstyle inline"> <li><i class="icon-phone topbar-info-icon top-2"></i>Call us: <span>(1) 456 6717</span></li> <li class="sep"><span>|</span></li> <li><i class="icon-envelope-alt topbar-info-icon top-2"></i>Email: <span>info@keenthemes.com</span></li> </ul> </div> <div class="col-md-6 topbar-social"> <ul class="list-unstyled inline"> <li><a href="#"><i class="icon-facebook"></i></a></li> <li><a href="#"><i class="icon-twitter"></i></a></li> <li><a href="#"><i class="icon-google-plus"></i></a></li> <li><a href="#"><i class="icon-linkedin"></i></a></li> <li><a href="#"><i class="icon-youtube"></i></a></li> <li><a href="#"><i class="icon-skype"></i></a></li> </ul> </div> </div> </div> </div> <!-- END TOP BAR -->
主菜单
顶部菜单允许方便地访问最频繁访问的信息和网页。顶部菜单下拉选项
<!-- BEGIN TOP NAVIGATION MENU --> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="dropdown active"> <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#"> Home <i class="icon-angle-down"></i> </a> <ul class="dropdown-menu"> <li class="active"><a href="index.html">Home Default</a></li> <li><a href="page_home2.html">Home with Top Bar</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#"> Pages <i class="icon-angle-down"></i> </a> <ul class="dropdown-menu"> <li><a href="page_about.html">About Us</a></li> <li><a href="page_services.html">Services</a></li> <li><a href="page_prices.html">Prices</a></li> <li><a href="page_contacts.html">Contact</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#"> Features <i class="icon-angle-down"></i> </a> <ul class="dropdown-menu"> <li><a href="feature_typography.html">Typography</a></li> <li><a href="feature_buttons.html">Buttons</a></li> <li><a href="feature_forms.html">Forms</a></li> <li><a href="feature_icons.html">Icons</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#"> Portfolio <i class="icon-angle-down"></i> </a> <ul class="dropdown-menu"> <li><a href="portfolio_4.html">Portfolio 4</a></li> <li><a href="portfolio_3.html">Portfolio 3</a></li> <li><a href="portfolio_2.html">Portfolio 2</a></li> <li><a href="portfolio_item.html">Portfolio Item</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#"> Blog <i class="icon-angle-down"></i> </a> <ul class="dropdown-menu"> <li><a href="blog.html">Blog Page</a></li> <li><a href="blog_item.html">Blog Item</a></li> </ul> </li> <li><a href="http://www.keenthemes.com/preview/index.php?theme=metronic_admin&page=index.html" target="_blank">Admin Theme</a></li> <li class="menu-search"> <span class="sep"></span> <i class="icon-search search-btn"></i> <div class="search-box"> <div class="input-group"> <form> <input style="background:#fff;" class="input-sm m-wrap form-control" type="text" placeholder="Search" /> <button type="submit" class="btn theme-btn">Go</button> </form> </div> </div> </li> </ul> </div> <!-- BEGIN TOP NAVIGATION MENU -->按钮
class="" | Description |
---|---|
<button type="button" class="btn default">Default button</button> | Default button |
<button type="button" class="btn blue">Blue button</button> | Blue button |
<button type="button" class="btn red">Red button</button> | Red button |
<button type="button" class="btn green">Green button</button> | Green button |
<button type="button" class="btn purple">Purple button</button> | Purple button |
<button type="button" class="btn yellow">Yellow button</button> | Yellow button |
初始化脚本代码
var App = function () { var localVariable; //local variable var sampleFunction = function() { //sample function code } return { //main method to initiate template pages init: function () { sampleFunction() // call local function }, //sample method declaration sampleMethod: function (test) { alert(test); } }; }();
Core Handler Functions defined in assets/scripts/app.js
Below will be listed all handler functons implemented in App object:
handleIEFixes
Fix html5 placeholder attribute for ie7 & ie8.
handleBootstrap
Bootstrap plugins initialization.
handleMisc
Handle Scroller
handleSearch
Show/hide ssearchbar
handleTheme
Set Theme Color
编码&扩展
CSS
To overide the theme CSS styles you can useassets/css/custom.cssfor your own customization. This will make the future updates easier if you keep your own CSS code seperate.
Javascript Plugins & Resources
Bootstrap
Metronic Frontennd based on Twitter BootstrapCSS Files
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>JS Files
<script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>Official Documentation
http://getbootstrap.com参考
Below is the list of all plugins and external resources used to power this template.Name | Description | URL |
---|---|---|
jQuery 1.10.2 | Core Javascript library | http://www.jquery.com |
Twitter Bootstrap v3.0 | Sleek, intuitive, and powerful front-end framework for faster and easier web development | http://getbootstrap.com |
Bxslider | Fully loaded, responsive content slider | http://bxslider.com |
FancyBox | FancyBox is a tool for displaying images, html content and multi-media | http://fancybox.net/ |
gmaps.js | gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code | http://hpneo.github.com/gmaps/ |
Revolution Slider | Turn simple HTML markup into a responsive or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization. | http://uniformjs.com/ |
Uniform | Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility | Revolution Slider on CodeCanyon |
Font Awesome | The iconic font designed for use with Twitter Bootstrap | http://fortawesome.github.com/Font-Awesome/ |
Open Sans | Metornic Frontend uses Open Sans web font from google fonts: http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700 | http://www.google.com/webfonts |
Upgrade
To topSince v1.5 comes with Bootstrap 3.0 support, we have changed and edited the entire theme and updated most of the 3rd party plugins and resources. The best practice for 2.x to 3.0 migration will be, to update your page header, top bar menu, sidebar menu and
footer part first. Then proceed with content and UI components.
Major Metronic Class Changes
Older Versions | Metronic 1.5 |
---|---|
.m-wrap | .form-control |
.btn | .btn .default |
.xsmall | .input-xsmall |
.small | .input-small |
.medium | .input-medium |
.large | .input-large |
Major Bootstrap Class Changes
Bootstrap 2.x | Bootstrap 3.0 |
---|---|
.container-fluid | .container |
.row-fluid | .row |
.span* | .col-md-* |
.offset* | .col-md-offset-* |
.brand | .navbar-brand |
.nav-collapse | .navbar-collapse |
.nav-toggle | .navbar-toggle |
.btn-navbar | .navbar-btn |
.hero-unit | .jumbotron |
.icon-* | .glyphicon .glyphicon-* |
.btn | .btn .btn-default |
.btn-mini | .btn-xs |
.btn-small | .btn-sm |
.btn-large | .btn-lg |
.visible-phone | .visible-sm |
.visible-tablet | .visible-md |
.visible-desktop | .visible-lg |
.hidden-phone | .hidden-sm |
.hidden-tablet | .hidden-md |
.hidden-desktop | .hidden-lg |
.input-small | .input-sm |
.input-large | .input-lg |
.checkbox.inline .radio.inline | .checkbox-inline .radio-inline |
.input-prepend .input-append | .input-group |
.add-on | .input-group-addon |
.thumbnail | .img-thumbnail |
ul.unstyled | .list-unstyled |
ul.inline | .list-inline |
相关文章推荐
- Bootstrap+MetroNic_1.5.4 Head meta
- metronic_v2.0.2 日历 使用
- 基于Metronic的Bootstrap开发框架经验总结(11)--页面菜单的几种呈现方式
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
- 基于Metronic的Bootstrap开发框架经验总结(8)--框架功能总体界面介绍
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
- (转)基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化
- Metronic 基于Bootstrap的模板
- Metronic 使用到的开源插件汇总
- 基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理
- 基于Metronic的Bootstrap开发框架经验总结(14)--条码和二维码的生成及打印处理
- 基于Metronic的Bootstrap开发框架经验总结(7)--数据的导入、导出及附件的查看处理
- QiYuAdmin-metronic首页的js和css介绍(SpringBoot项目实战)
- (转)基于Metronic的Bootstrap开发框架经验总结(7)--数据的导入、导出及附件的查看处理
- Bootstrap模板Metronic设置默认选中侧边栏
- 基于Metronic的Bootstrap开发框架经验总结(8)--框架功能总体界面介绍
- 基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用
- mvc4 和Metronic方案
- 基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化
- QiYuAdmin-BootStrapTable增加通用的搜索功能(Metronic实战)