metronic-Website Template

最新推荐文章于 2021-02-16 06:25:05 发布

月迷津渡丶

最新推荐文章于 2021-02-16 06:25:05 发布

阅读量3.3k

点赞数

分类专栏： Web 文章标签： metronic

Web 专栏收录该内容

145 篇文章 0 订阅

订阅专栏

模板结构

所有的模板文件都有固定的结构组成,如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 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 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

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`