# 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。