樣式 ttr edi local 編輯 修改文件 方便 code b2c

很多時候我們需要定制Bootstrap的樣式，然後根制入門初步中，每次都定制網頁（http://v3.bootcss.com/customize/）生成我們需要的Css是一件很麻煩又不方便的事件。幸好Bootstrap源中包含了Less文件，能讓我方便的修改與定制： Less:一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變量、混合（mixin）、函數等功能，讓 CSS 更容易維護、方便制作主題、擴充。使用Less文件，我們只需要修改文件中的變量值，再通過插件就能自動生成對應的Css文件了。 把Less文件夾拷貝到項目文件夾（TouchingVip.Blog）下： 基本的項目已經出來，現在單靠記事本已經不能很難編碼，我們得使用一個編輯工具去組織管理好這些文件，而且提高我們的編碼效率。Visual Studio Code，微軟出的跨平臺IDE開發編輯工具（https://code.visualstudio.com/ ），下載安裝。 打開項目文件夾 TouchingVip.Blog 回到之前自動生成Css的話題，如下圖搜索 Easy Less 插件並安裝，重新載入生效 這時候，我們還得配的東西。如果不，它自動生成的CSS會在Less目錄（與所編輯的less文件位於同一目錄） 如何配置插件詳情裏有說明： 打開 settings.json 文件，寫入並保存以下配置。這是配置在項目下的Css 文件夾中 配置好。現在可以修改Less 中定義的樣式了。比如要修改導航菜單的顏色，主要是以下樣式： .navbar-inverse 全局搜索該樣式：輸入.navbar-inverse 回車 因為樣式是Less生成的，所以要我們需要的是 .less 文件。這裏我們改的是navbar.less 文件。因為我們頁面引用的時bootstrap.css 而對應的bootstrap.less 裏引用了該文件。所以最終我們改完對應的less文件，還要隨便改一下bootstrap.less 比如說輸入個空格，保存觸發插件生成.css 文件 我們把它的值改成紅色：#ff0000 保存文件 打開bootstrap.less 文件，輸入空格再保存 刷新頁面

Bootstrap入門（三）：Less