Bootstrap是最受歡迎的html、css和js框架，用戶開(kāi)發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的WEB項(xiàng)目。
Bootstrap主題中的大部分組件、Css和JavaScript集成了Drupal的templatet和預(yù)處理。增強(qiáng)了：
使用到：編輯器Atom和Atom插件Remote-FTP，阿里云開(kāi)發(fā)環(huán)境
一、下載bootstrap主題
二、選擇主題
配置好remote-ftp之后，同步已經(jīng)下載好的主題到本地，此時(shí)你會(huì)看到bootstrap主題下面有個(gè)starterkits文件夾，里面包含cdn less sass版本的主題，根據(jù)習(xí)慣或者情況選擇復(fù)制其中一個(gè)。
三、自定義主題設(shè)置
在themes文件夾下面新建目錄custom，把復(fù)制好的子主題這里我選擇sass版本的子主題，粘貼到custon目錄里面，當(dāng)然你也可以直接復(fù)制到themes文件夾下面，一樣生效，只是為了更好的分類(lèi)和區(qū)別。
重命名sass文件夾為主題的唯一機(jī)器名cms_front
重命名cms_front/THEMENAME.starterkit.yml為cms_front.info.yml
重命名cms_front/THEMENAME.libraries.yml為cms_front.libraries.yml
重命名cms_front/THEMENAME.theme為cms_front.theme
重命名cms_front/config/install/THEMENAME.settings.yml為cms_front.settings.yml
重命名cms_front/config/schema/THEMENAME.schema.yml為cms_front.schema.yml，打開(kāi)文件重命名THEMENAME.settings為cms_front.settings,THEMETITLE改為cms_front
打開(kāi)cms_front.info.yml
原內(nèi)容
core: 8.xtype: themebase theme: bootstrapname: 'THEMETITLE'description: 'Uses the Bootstrap framework Sass source files and must be compiled (not for beginners).'package: 'Bootstrap'regions:navigation: 'Navigation'navigation_collapsible: 'Navigation (Collapsible)'header: 'Top Bar'highlighted: 'Highlighted'help: 'Help'content: 'Content'sidebar_first: 'Primary'sidebar_second: 'Secondary'footer: 'Footer'page_top: 'Page top'page_bottom: 'Page bottom'libraries:- 'THEMENAME/global-styling'- 'THEMENAME/bootstrap-scripts'
修改成：
core: 8.xtype: theme#base theme: bootstrap //不再依賴(lài)bootstrap為基礎(chǔ)主題name: 'cms frontend theme'description: 'Uses the Bootstrap framework Sass source files and must be compiled (not for beginners).'#package: 'Bootstrap'regions: navigation: 'Navigation'#navigation_collapsible: 'Navigation (Collapsible)' //在page.html.twig中也要處理菜單部分 header: 'Top Bar' highlighted: 'Highlighted' help: 'Help' content: 'Content' sidebar_first: 'Primary' sidebar_second: 'Secondary' footer: 'Footer' page_top: 'Page top' page_bottom: 'Page bottom'libraries: - 'cms_front/global-styling' - 'cms_front/bootstrap-scripts'
這就做完了初始化的工作，右鍵文件夾cms_front選擇upload上傳到服務(wù)器，drush cr更新緩存后，登錄到后臺(tái)主題管理，查看是否可以正常顯示自定義主題。
四、下載bootstrap框架資源庫(kù)
打開(kāi)中文bootstrap或者英文官網(wǎng)，下載對(duì)應(yīng)的sass源碼版本，解壓并重命名成bootstrap復(fù)制放入到cms_front主題文件夾下面。
五、復(fù)制bootstrap主題的templates模板
從bootstrap主題中復(fù)制templates里面的所有文件，或者你可以按自己的需要復(fù)制，放入到自定義主題cms_front/templates模板文件中。
六、按需加載bootstrap的js組件
在cms_front.libraries.yml文件中，可以看到：
global-styling: css: theme:css/style.css: {}bootstrap-scripts: js:bootstrap/assets/javascripts/bootstrap/affix.js: {}bootstrap/assets/javascripts/bootstrap/alert.js: {}bootstrap/assets/javascripts/bootstrap/button.js: {}bootstrap/assets/javascripts/bootstrap/carousel.js: {}bootstrap/assets/javascripts/bootstrap/collapse.js: {}bootstrap/assets/javascripts/bootstrap/dropdown.js: {}bootstrap/assets/javascripts/bootstrap/modal.js: {}bootstrap/assets/javascripts/bootstrap/tooltip.js: {}bootstrap/assets/javascripts/bootstrap/popover.js: {}bootstrap/assets/javascripts/bootstrap/scrollspy.js: {}bootstrap/assets/javascripts/bootstrap/tab.js: {}bootstrap/assets/javascripts/bootstrap/transition.js: {}
加載了全部的bootstrap組件，有些組件我們?cè)谧鐾觏?xiàng)目的時(shí)候可以重新的檢查一次，不需要的就注釋掉，依賴(lài)的時(shí)候再加載回來(lái)，節(jié)省服務(wù)器帶寬。
六、bootstrap css組件
查看自定義主題下面是sass/scss/style.scss
// Default variables.@import 'default-variables';// Bootstrap Framework.@import '../bootstrap/assets/stylesheets/bootstrap';// Base-theme overrides.@import 'overrides';
bootrap已經(jīng)為我們做好了規(guī)范，如果你要更改bootstrap css的組件變量不要直接修改bootstrap原有框架的變量，而是通過(guò)覆寫(xiě)的方式，當(dāng)你升級(jí)的時(shí)候就不會(huì)受到影響，只需要把覆蓋的變量寫(xiě)在_overrides.scss里面的變量會(huì)覆蓋bootstrap已經(jīng)定義好的變量。
在看這個(gè)文件./bootstrap/assets/stylesheets/bootstrap
/*!* Bootstrap v3.3.7 (http://getbootstrap.com)* Copyright 2011-2016 Twitter, Inc.* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)*/// Core variables and mixins@import 'bootstrap/variables';@import 'bootstrap/mixins';// Reset and dependencies@import 'bootstrap/normalize';@import 'bootstrap/print';@import 'bootstrap/glyphicons';// Core CSS@import 'bootstrap/scaffolding';@import 'bootstrap/type';@import 'bootstrap/code';@import 'bootstrap/grid';@import 'bootstrap/tables';@import 'bootstrap/forms';@import 'bootstrap/buttons';// Components@import 'bootstrap/component-animations';@import 'bootstrap/dropdowns';@import 'bootstrap/button-groups';@import 'bootstrap/input-groups';@import 'bootstrap/navs';@import 'bootstrap/navbar';@import 'bootstrap/breadcrumbs';@import 'bootstrap/pagination';@import 'bootstrap/pager';@import 'bootstrap/labels';@import 'bootstrap/badges';@import 'bootstrap/jumbotron';@import 'bootstrap/thumbnails';@import 'bootstrap/alerts';@import 'bootstrap/progress-bars';@import 'bootstrap/media';@import 'bootstrap/list-group';@import 'bootstrap/panels';@import 'bootstrap/responsive-embed';@import 'bootstrap/wells';@import 'bootstrap/close';// Components w/ JavaScript@import 'bootstrap/modals';@import 'bootstrap/tooltip';@import 'bootstrap/popovers';@import 'bootstrap/carousel';// Utility classes@import 'bootstrap/utilities';@import 'bootstrap/responsive-utilities';
導(dǎo)入了很多bootstrap的組件，在項(xiàng)目后期的時(shí)候就要把不需要的組件注釋掉。
結(jié)語(yǔ)
我們建議組件化開(kāi)發(fā)，但輸出的樣式表盡量少，或者合并成一個(gè)就夠了。樣式寫(xiě)在scss/style.scss里面，如果你把組件獨(dú)立成一個(gè)sass文件，可以使用@import的方式導(dǎo)入到總的style.scss里面，使用編譯器或者命令行監(jiān)聽(tīng)這個(gè)文件，當(dāng)保存時(shí)，輸出到自定義主題的文件夾css/style.css完成合并。
