metronic-Website Template
2024-07-04 06:33:31
模板结构
所有的模板文件都有固定的结构组成,如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.css
Load 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 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>
标题栏
顶栏包含联系信息、社会联系等
顶栏选项
<!-- 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 variablevar sampleFunction = function() {//sample function code}return {//main method to initiate template pagesinit: function () { sampleFunction() // call local function},//sample method declarationsampleMethod: 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 use assets/css/custom.css for 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 Bootstrap
CSS 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 top
Since 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
|
metronic-Website Template相关推荐
- [Activeden] slick full website template with cms and 2 skins 中文版
体系包含全部的模块,两个没有同的皮肤,深度链接,最值得等待的是包括高等PHP内容管理系统(后盾),这内里含有惊人的代价,不要错过. 下级PHP管理系统: 前台(预览变动):http://flashte ...
- 了解jvm对编程的帮助_这是您对社会责任编程的了解
了解jvm对编程的帮助 by ?? Anton de Regt 由?? 安东·德雷格 这是您对社会责任编程的了解 (This is what you need to know about Social ...
- 分享45款高质量的免费(X)HTML/CSS模板
当你需要在短时间内设计出一个网站的时候,网站模板就非常有用了.这也就是为什么这些设计模板已成为设计领域的最新趋势的原因.在这篇文章中,收集了各式各样的网站模板,您可以免费下载使用,希望这些设计模板不仅 ...
- 60个开发者不容错过的免费资源库
原文地地址:http://www.myexception.cn/other/1391134.html 文章作者Juan Pablo Sarmiento收集了60个较为实用.高效的工具资源库,可以帮助开 ...
- 经典HTML5学习资源
HTML5致力于为前端开发提供全面的标记语言.以下30多个资源可帮你开始学习HTML5. Blowing up HTML5 video and mapping it into 3D space(将HT ...
- [转]30个HTML5学习资源
早在几个星期前,Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载.众所周知,HTML5在互联网领域掀起了一场大论战,并让Adobe的日子很难熬.HTML5致力于为前端 ...
- xiaocms php,XiaoCms PHP企业网站模板， ，后台可备份 WEB(ASP,PHP,...) 238万源代码下载- www.pudn.com...
文件名称: XiaoCms下载 收藏√ [ 5 4 3 2 1 ] 开发工具: PHP 文件大小: 395 KB 上传时间: 2014-09-19 下载次数: 0 提 供 者: 企诚科技 详 ...
- 分享31个非常有用的 HTML5 教程
HTML5教程相关文章 15个非常有用的 HTML5 开发教程和速查手册 12个优秀的 HTML5 网站设计案例欣赏 分享25个优秀的 HTML5 开发教程 12款精美的免费 HTML 网站模板下载 ...
- 60佳优秀的 Photoshop 网页制作教程【下篇】
Photoshop 作为网页设计利器,是网页设计师必备.曾经和大分享过几篇优秀的 Photoshop 网页制作教程,喜欢的人非常多.今天这篇文章继续向大家分享优秀的 Photoshop 网页制作教程. ...
- python制作系统程序与html交互_python+html语音人物交互_flask后台与前端（html）交互的两种方法...
基于python flask框架搭建web flask后台与前端(html)交互的两种方法: 方法1 使用flask-wtf 提供的表单 用常见的登录为例: // An highlighted blo ...
最新文章
- 温州大学《机器学习》课程课件（六、KNN算法）
- redis之 zadd、zremrangebyscore、zremrangebyrank、zscore、zcard、zcount、zrangebyscore、zinczrevrankzrevrange
- Variant 与 内存泄露
- 力扣113. 路径总和 II（JavaScript）
- 多个项目共用同一个redis_比Redis快5倍的中间件，为啥这么快？
- 幸运大转盘抽奖逻辑实现
- 【ionic框架bug】slideBox在使用model或pop后width变为0的解决方案
- 如何利用区块链技术搭建企业新生态！
- nRF24L01+ 数据手册
- 京东API接口JD商品详情
- Typora如何将图片使用相对路径保存到统一文件夹中(解决.md文档传输丢图片的方法)
- 基于SpringBoot框架的网上购书系统的设计与实现
- 数据库巡检 java_美团MySQL数据库巡检系统的设计与应用
- 计算机组成原理题目透析（2）
- 高压之下依然能高效发挥才是真本事
- 什么是收藏加购？收藏加购本质？卖家与买家如何看待？收藏加购的作用是什么？
- 电子线路实验I综合设计：数字钟
- 更智能的云米双开门风冷冰箱，除了追剧，还能让食材井井有条
- 【硬核游戏攻略】2.matlab中调用Java实现《大家来找茬》快速求解器
- 数据库中distinct关键字的使用