# ACE主題
主要介紹其引用了那些 CSS 和 JS 。它們的作用分別是什么。
## 1. CSS
其引用的主要CSS文件如下:
~~~
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="../assets/css/bootstrap.css" />
<link rel="stylesheet" href="../assets/css/font-awesome.css" />
<!-- page specific plugin styles -->
<!-- text fonts -->
<link rel="stylesheet" href="../assets/css/ace-fonts.css" />
<!-- ace styles -->
<link rel="stylesheet" href="../assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="../assets/css/ace-part2.css" class="ace-main-stylesheet" />
<![endif]-->
<!--[if lte IE 9]>
<link rel="stylesheet" href="../assets/css/ace-ie.css" />
<![endif]-->
~~~
### 1.1 bootstrap.css
其版本為:v3.0.2。openstack里的版本為:V3.3.7。這里我們使用openstack里提供的bootstarp。所以可以忽略這個文件。
### 1.2 font-awesome.css
其版本為:4.2.0。openstack里的版本為:4.5.0。這埯我們使用openstack里提供的 font-awesome。所以可以忽略這個文件。
### 1.3 ace-fonts.css **
這里定義一些字體樣式。注意其里面的“../”,如果不能生效則需要更改。這個文件是要添加的。
### 1.4 ace.css **
ACE的主題文件。這個需要添加。
#### 1.5 ace-part2.css 和 ace-ie.css
這個也需要添加。
**由上面可得: ace-fonts.css , ace.css ,ace-part2.css 和 ace-ie.css,這三四個CSS文件需要添加 。**
## 2 . JS
其里面包含的文件如下:
~~~
<!-- ace settings handler -->
<script src="../assets/js/ace-extra.js"></script>
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
<!--[if lte IE 8]>
<script src="../assets/js/html5shiv.js"></script>
<script src="../assets/js/respond.js"></script>
<![endif]-->
~~~
這里的內容全添加進去。
~~~
<!-- basic scripts -->
<!--[if !IE]> -->
<script type="text/javascript">
window.jQuery || document.write("<script src='../assets/js/jquery.js'>"+"<"+"/script>");
</script>
<!-- <![endif]-->
<!--[if IE]>
<script type="text/javascript">
window.jQuery || document.write("<script src='../assets/js/jquery1x.js'>"+"<"+"/script>");
</script>
<![endif]-->
<script type="text/javascript">
if('ontouchstart' in document.documentElement) document.write("<script src='../assets/js/jquery.mobile.custom.js'>"+"<"+"/script>");
</script>
<script src="../assets/js/bootstrap.js"></script>
<!-- page specific plugin scripts -->
<!-- ace scripts -->
<script src="../assets/js/ace/elements.scroller.js"></script>
<script src="../assets/js/ace/elements.colorpicker.js"></script>
<script src="../assets/js/ace/elements.fileinput.js"></script>
<script src="../assets/js/ace/elements.typeahead.js"></script>
<script src="../assets/js/ace/elements.wysiwyg.js"></script>
<script src="../assets/js/ace/elements.spinner.js"></script>
<script src="../assets/js/ace/elements.treeview.js"></script>
<script src="../assets/js/ace/elements.wizard.js"></script>
<script src="../assets/js/ace/elements.aside.js"></script>
<script src="../assets/js/ace/ace.js"></script>
<script src="../assets/js/ace/ace.ajax-content.js"></script>
<script src="../assets/js/ace/ace.touch-drag.js"></script>
<script src="../assets/js/ace/ace.sidebar.js"></script>
<script src="../assets/js/ace/ace.sidebar-scroll-1.js"></script>
<script src="../assets/js/ace/ace.submenu-hover.js"></script>
<script src="../assets/js/ace/ace.widget-box.js"></script>
<script src="../assets/js/ace/ace.settings.js"></script>
<script src="../assets/js/ace/ace.settings-rtl.js"></script>
<script src="../assets/js/ace/ace.settings-skin.js"></script>
<script src="../assets/js/ace/ace.widget-on-reload.js"></script>
<script src="../assets/js/ace/ace.searchbox-autocomplete.js"></script>
~~~
這里只引用 ace scripts 這些 js 文件。
- 1.概述
- 2.CSS樣式引入
- 2.1 My Themes
- 2.2 Horizon
- 2.3 Angular
- 2.4 HORIZON_CONFIG.scss_files
- 2.5 Custom Styles
- 3. JS文件引入
- 31. iframe_embed_settings 標簽
- 3.2 horizon/_conf.html
- 3.3 _script_loader.html
- 3.4 _custom_head_js.html
- 3.5 horizon/_scripts.html
- 4. 主題替換
- 4.1 ACE主題
- 4.2 引入ACE主題的CSS樣式
- 4.3 引入ACE主題的JS文件
- 4.4 收集和壓縮
- 4.5 總結
- 4.6 錯誤與沖突收集
- 5.錯誤修正
- 6.openstack里所有功能瀏覽
- 7.前端hightchart.js分析
- 8.命令使用