# Custom Styles ~~~ @import "/{{ THEME_DIR }}/{{ THEME }}/styles"; ~~~ 其对就的路径：horizon\openstack_dashboard\themes\maintenance\static\_styles.scss。里面为： ~~~ @import "bootstrap/styles"; @import "horizon/styles"; ~~~ ## 一、bootstrap/styles 　　这里面引入了三个文件，从下面代码中可知： ~~~ // Based on Paper // Bootswatch // ----------------------------------------------------- @import "/horizon/lib/bootstrap_scss/scss/bootstrap/mixins/vendor-prefixes"; @import "/horizon/lib/bootswatch/paper/bootswatch"; @import "/horizon/lib/roboto_fontface/css/roboto-fontface.scss"; ~~~ 　　后面紧接着的是一些 alert 的样式文件。 ### 1. bootstrap/mixins/vendor-prefixes" 　　这里面是 Vendor Prefixes 样式。 ### 2. bootswatch 　　这个就是 bootswatch 里的主题样式。 ### 3. roboto-fontface 　　其路径为： horizon\static\horizon\lib\roboto_fontface\css\roboto-fontface.css。这里是定义字体的 CSS 文件 ## 二、horizon/styles 　　其文件路径为： horizon\openstack_dashboard\themes\maintenance\static\horizon\_styles.scss。其里面引入 icons 和以下的组件：checkboxes、context_selection、dropdowns、hamburger、help_panel、magic_search、messages、navbar、progress_bars、radiobuttons、selects、sidebar、trees。