Content 中部内容

Content

Layout

默认的布局

1. breadcrumbs and searchbox
2. page title optional
3. page conent
4. settings box optional

<div class="main-container" id="main-container">

<!-- sidebar here -->

<div class="main-content"><div class="main-content-inner">

<div class="breadcrumbs" id="breadcrumbs">

<!-- breadcrumbs here -->

</div>

<div class="page-content">

<div class="ace-settings-container" id="ace-settings-container">

<!-- settings box goes here -->

</div>

<div class="page-header">

<!-- page header goes here -->

</div>

<div class="row">

<div class="col-xs-12">

<!-- page content goes here -->

</div>

</div>

</div><!-- /.page-content -->

</div></div><!-- /.main-content -->

<a class="btn-scroll-up" id="btn-scroll-up">

...

</a>

</div><!-- /.main-container -->

Breadcrumbs 面包屑导航

<div id="breadcrumbs" class="breadcrumbs">

<ul class="breadcrumb">

<li><i class="fa fa-home home-icon"></i> <a href="#">Home</a></li>

<li><a href="#">...</a></li>

<li><a href="#">...</a></li>

<li class="active">...</li>

</ul><!-- /.breadcrumb -->

<!-- searchbox -->

</div>

Search box 搜索

<div id="nav-search" class="nav-search">

<form class="form-search">

<span class="input-icon">

<input type="text" class="nav-search-input" id="nav-search-input" autocomplete="off" placeholder="Search ..." />

<i class="ace-icon fa fa-search nav-search-icon"></i>

</span>

</form>

</div>

搜索框自动完成

根据 js 数组内容

//auto complete's data source is a static array

$('#nav-search-input').typeahead({

source: some_static_array,

updater: function (item) {

//when an item is selected from dropdown menu, focus back to input element

$('#nav-search-input').focus();

return item;

}

});

Ajax

//auto complete's data is dynamically retrieved from server

source: function(query, process) {

$.ajax({url: 'source.php?q='+encodeURIComponent(query)}).done(function(result_items){

process(result_items);

})

}

小的搜索框

<div id="nav-search" class="nav-search minimized">

...

</div>

Page Title & Content 页标题和内容

包含 设置选项框

<div class="page-content">

<div class="ace-settings-container" id="ace-settings-container">

<!-- settings box goes here -->

</div>

<div class="page-header">

<!-- page header goes here -->

</div>

<div class="row">

<div class="col-xs-12">

<!-- page content goes here -->

</div>

</div>

</div><!-- /.page-content -->

标题头部

<div class="page-header">

<h1>

Dashboard

<small><i class="ace-icon fa fa-angle-double-right"></i> overview & stats</small>

</h1>

</div>

内容样式 .row 、 .col-xs-12

<div class="row">

<div class="col-xs-12">

<!-- page content goes here -->

</div>

</div>

Settings Box

详情见 Settings Box