當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Pug+Stylus+Bootstrap入门

發布時間：2023/12/31 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 Pug+Stylus+Bootstrap入门小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2019獨角獸企業重金招聘Python工程師標準>>>

本文說明

博主最近在學習Express.js，里面涉及到Pug，Stylus和Bootstrap的使用。為了使文章主題專一，故而把有關這三者的基本知識點另外寫成本文。

本文在寫作過程中主要參閱了下面這些資料：

Pug官方文檔

Stylus官方文檔

Getting Started Stylus一文

Bootstrap v4-alpha官方文檔

Jump Start Bootstrap一書

Pug簡介

Pug，原名Jade，是一款模版引擎（及對應的模版語言）。如果你熟悉像Express.js這樣的網絡應用框架，那么就會知道模板引擎負責的是動態渲染視圖（也就是HTML文件）的。Pug與其他大多數模板引擎最大的不同在于它獨特的語法，能夠讓開發者更加快速地編寫模板文件。下文將對其語法做簡略的介紹。

Stylus簡介

Stylus是什么？

Stylus是CSS預處理器／框架，也是一套樣式語言。這是非常學院氣的定義。簡單來說，Stylus就是威力加強版的CSS，它給CSS加入了變量、運算、代碼重用等等特性，能大大提高前端工程師的效率和幸福感。

為什么選用Stylus？

Stylus是目前流行的三大CSS預處理器中的一個，另外兩個分別是Less和Sass。它們大致功能相似：讓開發者高效地編寫生成CSS文件。那么為什么博主從中選擇Stylus呢？

主要的原因如下：

Stylus是基于Node.js的。而且：
Stylus提供有一套Javascript API。這對于大多數前端工程師來說，他們可以繼續施展已經熟悉了的JavaScript的技能，避免更多的學習成本。相比起來，Sass需要Ruby；而Less雖然在上面這兩條與Stylus相同，但是：
Stylus的語法更加簡潔，不需要CSS里的花括號、冒號、逗號、分號；同時向后兼容CSS語法，甚至可以混用兩套語法。另外，雖然Bootstrap是主要偏重于Less和Sass，不過：
Stylus有Bootstrap的轉接庫（port）。
Stylus還有一個非常小而強大的庫：nib，其中有很多有用的組件（component）和植件（mixin）。

Stylus的語法

Stylus的語法這里不做太多的介紹：它的基本語法就是CSS去掉花括號冒號逗號（見下文），高級語法有興趣的話請到Stylus官網學習。

Bootstrap簡介

Bootstrap是由Twitter開發的一款前段框架。它最大的特點是以移動設備優先，其響應式樣式能夠自適應于臺式機、平板電腦和手機。加上眾多強大而美觀的內置組件，Bootstrap極大地促進了開發人員的效率。

應用實例

下面我們通過一個簡單的實例來展示一下三者的基本用法。

配置項目環境

首先確認安裝好了npm。

新建項目文件夾jbs，這是項目的根目錄，下文中的命令行命令，如未另行說明，都是在該地址下執行的。在其下另建css，styl及views三個文件夾。

安裝Pug

$ npm install -g pug

之后運行pug --version正確顯示版本號則表示安裝成功。請注意，為了方便，這里是全局安裝，Mac和Linux用戶請在該命令前加sudo。在具體的項目開發時，也可以選擇僅在目前項目下安裝（去掉-g）。

安裝Stylus

Stylus的源碼托管在Github上，你可以選擇從源碼安裝。但更好更簡單的方法是，先安裝好npm，然后全局安裝：

$ npm install -g stylus

安裝成功的話，運行stylus --version會顯示版本信息。

Pug的基本用法

本節利用一個Hello World頁面來簡單介紹下Pug的基本用法。

在views下新建layout.pug文件，寫入以下代碼：

doctype html html(lang="en")headtitle| First Jadebodyh1 Hello World!

這就是一個簡單的Pug模版文件。打開命令行，我們可以用以下命令來將其編譯成HTML文件。

$ pug --pretty views/layout.pug

運行之后，views文件夾里會出現一個layout.html文件，用編輯器打開可以看到其內容為：

<!DOCTYPE html> <html lang="en"><head><title>First Jade</title></head><body><h1>Hello World!</h1></body> </html>

而用瀏覽器打開的話（這里使用Chrome），則頁面效果為：

這里涉及到的Pug語法點有：

Pug依靠縮進來表示元素之間的嵌套關系，免去了大小于號和結束標簽

依靠圓括號來為元素設定屬性，例如html(lang="en")

為元素設定單行文本內容的兩種方式：

另起一行，一層縮進，在文本前加一個|（pipe符號），兩者之間可有一個空格

不另起行，將元素名和文本內容間用一個空格分開

由于方便，在設定單行文本內容的時候，我們通常用第二種（不另起行）的方式；|符號多用在處理多行文本的時候。

配置Bootstrap

下面我們把Bootstrap加入到頁面中（我們這里使用的是Bootstrap v4.0.0-alpha.3）。如下修改layout.pug文件：

block variables- const page_title = "Default Title";doctype html html(lang="en")head// use Unicodemeta(charset="utf-8")// force IE to use the lastest rendering enginemeta(http-equiv="X-UA-Compatible", content="IE=edge")// force browser to scale the app to the size of window space availablemeta(name="viewport", content="width=device-width, initial-scale=1")block titletitle= page_titleblock stylesheetslink(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css", integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd", crossorigin="anonymous")// bring support for HTML5 and CSS3 to old IEsbodyblock headerblock contentblock footer// 注意要先添加jQuery，然后再添加Bootstrap的JS文件block javascriptsscript(src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js")script(src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js", integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7", crossorigin="anonymous")

編譯后，用Chrome打開，頁面上沒有任何內容。然而右鍵打開Inspect，在Network標簽頁下可以檢查各文件是否載入成功。（會有錯誤提示缺少一個庫，是Bootstrap工具提示的依賴包，這里并沒有影響，請忽略。）

回到layout.pug文件。首先要注意的是head中的三個meta元素。第一個設定了該頁面的字符集。第二個強迫IE瀏覽器使用最新的渲染模式。第三個最重要，它是Bootstrap實現響應式（responsive）網頁的關鍵，必須出現在靠前的位置；它定義了網頁的視口（viewport），也就是頁面的可視范圍，告訴瀏覽器如何控制頁面的維度和縮放，允許網頁辨認進而響應設備／瀏覽器的寬度。

第二個值得注意的是head最后的那一段條件注釋（conditional comment）和導入的JS文件。這一段代碼的目的，正如注釋所講，是為了使IE8及更老的版本能夠支持HTML5和CSS3的特性。

另外四個Pug的語法點：

Pug文件中可以直接寫HTML語句

Pug文件中可以寫//形式的注釋，會編譯成HTML式的注釋。如果不想編譯某段注釋，則可以使用unbuffered comment，只需用//-打頭就行。不過Pug沒有語法支持條件注釋，這也是那段代碼直接用HTML語句的原因。詳見文檔

Pug中可以帶JavaScript語句，例如上面定義常量page_title的語句。這種以-打頭的代碼也是unbuffered，編譯時不會往HTML文件中寫入該表達式的值。而需要往HTML文件中寫入JavaScript表達式的值時，則需要以=打頭（例如上面代碼中的title= page_title，這里請勿與編程語言中的賦值搞混淆）。詳見文檔

Pug中的“代碼復用”：該功能主要由兩個關鍵詞來使用block和extends。block關鍵詞用來定義一個可以覆寫／擴充的代碼塊，例如上面我們定義了七個這樣的代碼塊，有的已經有內容，有的完全是空的。而復用已有的代碼、覆寫／擴充block代碼塊則需要用到extends。下面馬上給出相關示例。

在views下新建index.pug文件，其內容為：

編譯該文件：

$ pug views/index.pug --pretty

用文本編輯器打開生成的index.html文件，可以看到layout.pug中所有的內容都包含在內，并且我們覆寫的內容也在。如果用Chrome打開該文件，則可看到（注意標簽頁上的名字）：

Bootstrap柵格系統

Bootstrap是用來創造響應式（responsive）和移動端優先（mobile-first）網站／應用的。而其核心就是柵格系統（Grid System）。

直接來看代碼。打開views/index.pug文件，將其內容修改為：

//- 復用layout.pug的代碼，可以省略后綴名（注意這是條unbuffered comment） extends ./layout//- 覆寫variables代碼塊 block variables- const page_title = "Homepage";- const site_name = "Bootstrap Grid System"//- 擴充stylesheets append stylesheetslink(rel="stylesheet", href="../css/mystyle.css")//- 覆寫header代碼塊 block headerh1= site_name//- 覆寫content block content.container.row- for (var i = 0; i < 12; i++).col-xs-6.col-sm-4.col-md-2.col-lg-1.col-content(class= "col"+i)p= i

然后，終于輪到Stylus一展身手。在styl下新建mystyle.styl文件，其內容為：

colors = aqua blue fuchsia green lime maroon navy olive purple red teal yellowfor color, i in colors.col{i}background: color.col-contentmin-height: 50pxtext-align: centerfont-size: 25px

運行下面的命令來編譯CSS文件：

$ stylus styl/mystyle.styl --out css

打開編譯好的文件css/mystyle.css，可以看到上面短短幾行代碼能幫我們完成大量的重復性工作。這就是Stylus的強大之處。

還可以讓Stylus來監視上面的文件并自動編譯：

$ stylus --watch styl/mystyle.styl --out css

注意這不會啟用后臺進程而是會占用命令行進程。所以可以專門開一個命令行窗口來干這個事。

然后編譯index.pug成index.html，在Chrome里打開，可以看到我們創建了十二個色塊。由寬到窄改變Chrome的寬度，可以看到色塊排列的方式會從一行排開，變到兩行六列，變到四行三列，最終變為六行兩列（注意不同排列方式的個數），響應不同尺寸的視口。

這里推薦Chrome的一個插件：Window Resizer。有了它改變瀏覽器的大小將會特別方便與準確，利于開發針對各種設備的網頁／應用。

下面來簡單說說上面的代碼里涉及到的知識點。

首先來看index.pug中新加的這段代碼：

//- 覆寫content block content.container.row- for (var i = 0; i < 12; i++).col-xs-12.col-sm-6.col-md-4.col-lg-2.col-xl-1.col-content(class= "col"+i)p= i

其編譯而成的HTML代碼為：

要說明的第一點，由于div是最經常使用的元素，所以Pug以它為默認元素，如果不特別說明（省略不寫）的話，默認創建一個div元素。而.container，.row，.col-**等等，都是Pug利用jQuery的選擇器語法來表示該元素的類（class）屬性。

在HTML頁面使用Bootstrap主要是依靠給元素附上Bootstrap預定義的CSS類（class），比如上面的views/index.pug文件里的.container、.row、.col-**等等（但col-content和col1～col12是我們自己定義的類，與Bootstrap無關）。

Bootstrap的柵格系統通常是下面結構：

Bootstrap推薦把所有的柵格系統的行和列都寫在一個container下面。好處是方便為設定總寬度和對準方式等等。所以當你看到.container的元素時就可以簡單地理解為：這個元素以及其下所有元素代表的頁面內容將會按照視口的寬度而改變排列顯示方式。

container下面會有若干行（.row）。所有的行都會與該container等寬，也就是占據所有的寬度，也就是說行與行之間一定是上下層壘的。前面說到，Bootstrap會把每一行都十二等分，然后按照設定的比例分配給不同的列元素，例如.col-sm-2，那么這里的sm什么的到底是什么意思呢？

Bootstrap 4把視口的寬度分為5類，如下表所示：

名稱 | 寬度 | 情景 | 代碼 --|---|-- | -- 超小 | < 544px |小屏幕手機豎放 | xs (for extra small) 小 | >= 544px |手機豎放 | sm (for small) 中等 | >= 768px |手機橫放；平板豎放 |md (for medium) 大| >= 992px |平板橫放；筆記本 | lg (for large) 超大| >= 1200px |顯示器| xl (for extra large)

col-sm-2的意思就是，當視口是sm的時候（比如豎放的手機），那么這個列元素的寬度將占據其所在行的六分之一（2/12)。所以上面的代碼里<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 col-xl-1">就意味著，這個元素在從小到大四個等級的視口里將依次占據所在行的全部、二分之一、三分之一、六分之一和十二分之一。

另外一提，上表中的那四個寬度：544px，768px，992px，1200px稱為響應變化點（responsive breakpoint），或者簡稱為響應點。有了這個概念，我們就可以討論很多細節了。比如說Bootstrap4里有兩種container，一種是我們上面使用的.container，叫做固定寬度container，它的max-width屬性只在越過響應點時才發生改變；另一種是.container-fluid，其寬度一直與視口寬度相等。

結語

以上就是本篇入門筆記的全部內容。注意還有很多代碼中涉及到的細節，我們這里都沒有提到，比如說Pug里為元素設定類屬性的不同的方法，以及Stylus的語法等等。這些都留給讀者自行查閱相關文檔或其他教程。

轉載于:https://my.oschina.net/qiaotoubao/blog/658649

總結

以上是生活随笔為你收集整理的Pug+Stylus+Bootstrap入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： linux下find命令之-exec
下一篇：通过jquery-ui中的sortabl