Page Layout 页面布局
Layout 布局
Layout
- Navbar
- Sidebar
- Breadcrumbs (inside "main-content")
- Page content (inside "main-content")
- Settings box (inside "page-content")
- Footer
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- title, meta tags, list of stylesheets, etc ... -->
</head>
<body class="no-skin">
<div class="navbar" id="navbar">
<!-- navbar goes here -->
</div>
<div class="main-container" id="main-container">
<div class="sidebar responsive" id="sidebar">
<!-- sidebar goes here -->
</div>
<div class="main-content">
<div class="breadcrumbs">
<!-- breadcrumbs goes here -->
</div>
<div class="page-content">
<!-- setting box goes here if needed -->
<div class="row">
<div class="col-xs-12">
<!-- page content goes here -->
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.page-content -->
</div><!-- /.main-content -->
<!-- footer area -->
</div><!-- /.main-container -->
<!-- list of script files -->
</body>
</html>
Head
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- use the following meta to force IE use its most up to date rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> page tite </title>
<meta name="description" content="page description" />
<!-- stylesheets are put here, refer to files/css documentation -->
<!-- some scripts should be here, refer to files/javascript documentation -->
</head>
Viewport meta tag
移动设备响应式
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Body element
<body class="no-skin">
...
</body>
皮肤：
- .no-skin
- .skin-1
- .skin-2
- .no-skin.skin-3
Empty layout空页面布局
例子：html/empty.html
<html>
<head>
<!-- title, meta tags, list of stylesheets, etc ... -->
</head>
<body class="no-skin">
<div class="navbar" id="navbar">
<!-- navbar goes here -->
</div>
<div class="main-container" id="main-container">
<div class="sidebar responsive" id="sidebar">
<!-- sidebar goes here -->
</div>
<div class="main-content">
<div class="page-content">
<div class="row">
<div class="col-xs-12">
<!-- page content goes here -->
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.page-content -->
</div><!-- /.main-content -->
</div><!-- /.main-container -->
<!-- list of script files -->
</body>
</html>
Login layout
layout
<html>
<head>
</head>
<body class="login-layout">
<div class="main-container">
<div class="main-content">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<!-- page content goes here -->
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.main-content -->
</div><!-- /.main-container -->
</body>
</html>
Scripts : login.js