HTML中的圖片區(qū)域鏈接方法詳解-零基礎(chǔ)自學(xué)網(wǎng)頁制作

圖片添加區(qū)域鏈接的基本寫法

首先我們看看效果：

實(shí)現(xiàn)這樣的功能需要學(xué)習(xí)以下幾點(diǎn)內(nèi)容。

1.認(rèn)識(shí)<img/><map><area/></map>基本結(jié)構(gòu)

首先復(fù)制一個(gè)html框架，命名為“圖片區(qū)域鏈接.html”,示例代碼如下：

<!DOCTYPE HTML> 
  <html>  
  <head>   
  <title>圖片區(qū)域鏈接</title>  
  <meta charset="utf-8">  
  </head>   
  <body>  

  </body>   
  </html>

向<body></body>中添加<img><map><area/></map>基本結(jié)構(gòu)，示例代碼如下：

 <body>  
 <img/>
   <map>
   <area/>
   </map>
 </body>

指定要添加區(qū)域鏈接的圖片的路徑，如下：

 <img src="img/image1.jpg"/>
   <map>
   <area/>
   </map>

讓<img>標(biāo)簽通過<map>的名字來驅(qū)使<map>為自己工作。

需要兩步，第一，給<map>起名字，name=“map”，為了兼容所有的瀏覽器，還要加上id=“map”（有的瀏覽器只認(rèn)id）。

第二，讓<img>叫出<map>的名字或id，usemap="#map"。大家要注意，叫名字時(shí)要加#。這個(gè)在之前的教程中也經(jīng)常出現(xiàn)。

示例代碼如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area/>
   </map>

下面來劃分區(qū)域。

2.為圖片劃分區(qū)域的方法

<area>是用來劃分區(qū)域的標(biāo)簽，area也是“”區(qū)域“”的意思。

默認(rèn)的shape（形狀）屬性有“矩形（rect）”、“圓形（circ）”、“多邊形（poly）”三個(gè)值。

分別添加三個(gè)形狀，示例代碼如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area shape="rect"/>
   <area shape="circ"/>
   <area shape="poly"/>
   </map>

下面我們就要為區(qū)域規(guī)定參數(shù)，也就是在圖像上的位置和范圍大小。

為<area>添加coords屬性可以指定區(qū)域的位置和范圍。

如果shape="rect" 則coords由四個(gè)參數(shù)組成。例如coords="0,0,50,50"。從左到右，兩兩一組，組成兩個(gè)平面坐標(biāo)，即（0,0）和（50，50），單位是“像素”，矩形區(qū)域如下：

如果shape=“circ”，coords=“50,50,10”。（50,50）定義了圓心，10是半徑。如圖：

如果shape=“poly”，coords的參數(shù)不少于3對(duì)！注意是“對(duì)”！從左到右，兩個(gè)數(shù)就是一組坐標(biāo)，三組坐標(biāo)可以確定一個(gè)三角形，多組坐標(biāo)可以確定多邊形。例如

這組參數(shù)畫出了下圖中殲20的邊框線（600像素*400像素，如果圖像的長(zhǎng)寬像素?cái)?shù)變了，參數(shù)就不正確了），如圖：

這時(shí)，大家會(huì)有一個(gè)問題：如何才能知道圖像中某個(gè)像素點(diǎn)的坐標(biāo)呢？

3.使用Gimp軟件精準(zhǔn)定位圖片區(qū)域

使用Gimp軟件可以解決這個(gè)問題。

Gimp是一款類似于Photoshop的數(shù)字圖像處理軟件，不同的是，Gimp是開源免費(fèi)的。

下載地址：https://www.gimp.org/

雙擊安裝即可，注意選擇一下安裝目錄。

完成安裝之后打開，界面如下：

點(diǎn)擊“文件”找到“打開”：

選擇要打開的圖片名字：

點(diǎn)擊名稱后，右邊會(huì)有圖像預(yù)覽，點(diǎn)擊“打開”即可：

打開后如圖：

把鼠標(biāo)放到圖像的任意位置，看左下角：

這里就會(huì)顯示我們鼠標(biāo)所在的像素坐標(biāo)數(shù)值。

這樣我們就能方便地寫“poly”的coords了。

請(qǐng)?jiān)诳臻e時(shí)找一張圖片演練一下吧！

4.為區(qū)域添加鏈接

在<area/>標(biāo)簽中添加href屬性即可指定鏈接路徑，如下：

href="https://www.zhihu.com/question/284642168"

添加title屬性可以在鼠標(biāo)滑過鏈接區(qū)域時(shí)提示讀者，如下：

title="殲20氣動(dòng)外形分析"

今天的內(nèi)容結(jié)束了，圖像區(qū)域鏈接在使用時(shí)還有一些注意事項(xiàng)，我們下次再詳細(xì)討論。

使用碎片時(shí)間，學(xué)習(xí)完整知識(shí)！關(guān)注大魚師兄，一起精研技藝。

標(biāo)簽	說明
<iframe>	定義一個(gè)內(nèi)聯(lián)的iframe

這篇文章我已經(jīng)醞釀了半年之久，或者說拖沓了這么久吧。想說的東西很多，卻又無從說起。如今輕量級(jí)框架如雨后春筍，層出不窮。我想每個(gè)人都應(yīng)該歸納總結(jié)工作中的常見需求，編寫一套適合自己的 CSS 框架。

在之前的文章中，我提到了面向?qū)ο蟮?CSS（比如 BEM、OOCSS、SMACSS，詳見 http://vanseodesign.com/css/dry-principles/）。這是一種思想，并不涉及具體的 CSS 問題，主要是類命名的策略！現(xiàn)在仍然有很多人對(duì)于前端框架的認(rèn)識(shí)還停留在表面，認(rèn)為 Bootstrap 是后端人員專用，前端沒必要等等。

我不知道這種說法從何而來，我最開始也不喜歡使用框架，或許和很多人的想法一樣，畏懼新知識(shí)、害怕難以駕馭、遇到問題的時(shí)候無法解決等等。最關(guān)鍵的一點(diǎn)是很多人認(rèn)為框架的樣式是固定的，修改起來太麻煩，還不如自己根據(jù)設(shè)計(jì)圖寫起來方便。

為什么使用框架

為什么使用框架？答案顯而易見，效率。除此之外，使用框架或者研究框架的意義還有很多，比如面向?qū)ο笏枷氲木唧w實(shí)現(xiàn)。在上一家公司工作的時(shí)候，開始的幾個(gè)項(xiàng)目我也是用最原始的方法書寫 CSS 。項(xiàng)目之中最讓我頭疼的就是類的命名。我想大多數(shù)人都是根據(jù)功能去命名，這就造成了很多的冗余，相同的組件可能寫很多次。簡(jiǎn)單舉一個(gè)例子，如下圖，個(gè)人中心的登錄界面。

很多人包括我剛開始的時(shí)候可能會(huì)選擇下面的類命名及布局方式，其通用性非常差：

<div class="login-area"> <div class="login-img"> <img src="..." /> </div> <div class="login-text"> <a href="...">請(qǐng)點(diǎn)擊登錄</a> </div></div>

然而了解 Bootstrap 的人應(yīng)該一眼就發(fā)現(xiàn)上圖就是一個(gè) media 對(duì)象，無非一些小細(xì)節(jié)需要調(diào)整一下：

<div class="media"> <div class="media-left"> <img src="..." /> </div> <div class="media-body media-middle"> <a href="...">請(qǐng)點(diǎn)擊登錄</a> </div></div>

為了讓文字與圖片居中對(duì)齊，我們可以使用 Bootstrap 的.media-middle的輔助類。如果在工作中還要根據(jù)需求自定義一些輔助類調(diào)整細(xì)節(jié)，當(dāng)然這是一個(gè)移動(dòng)端的例子，可以選擇移動(dòng)端框架相關(guān)的 media 對(duì)象。

另外，在項(xiàng)目改版的時(shí)候，原始的方法的修改更是慘不忍睹，可以說是噩夢(mèng)，冗長(zhǎng)的 CSS 文件、混亂的功能劃分、類名、色值等等。最后也只能硬著頭皮一點(diǎn)一點(diǎn)修改。那一刻我才體會(huì)到框架的意義以及前端工具的重要性。我從工作中總結(jié)出，要么你可以熟練的使用某一個(gè)框架，要么就自己實(shí)現(xiàn)一個(gè)框架。

前端框架對(duì)比

目前市面上前端框架主要分重量級(jí)與輕量級(jí)。重量級(jí)主要有 Bootstrap、Semantic、UIkit、Foundation 等，輕量級(jí)有 Pure、Skeleton、Miligram 等。經(jīng)常關(guān)注前端動(dòng)態(tài)的工程師會(huì)發(fā)現(xiàn)輕量級(jí)框架每年都層出不窮。在我上面提到的主流輕量級(jí)框架之外還有很多類似的框架。

我一直問自己，為什么要重復(fù)造輪子。經(jīng)過研究，我發(fā)現(xiàn)這些輕量級(jí)框架其實(shí)大多都不能勝任工作需求，而且模仿的痕跡很重，基本上都或多或少的有 Bootstrap 的影子。那么這些輕量級(jí)框架有沒有意義呢？當(dāng)然有。但是就我個(gè)人觀點(diǎn)，選擇輕量級(jí)框架反倒不如自己實(shí)現(xiàn)一個(gè)框架。因?yàn)榇蠖噍p量級(jí)框架就像是工作總結(jié)，是根據(jù)自己的業(yè)務(wù)需求實(shí)現(xiàn)的。所以大多不具有通用性。

前端框架的對(duì)比主要以 Bootstrap、Semantic、UIkit 為主，因?yàn)槲覀€(gè)人感覺這三個(gè)最具有代表性，而且設(shè)計(jì)風(fēng)格各有特色。Foundation 也有很多大公司在用，但以我個(gè)人觀點(diǎn)，無論是框架的易用性還是設(shè)計(jì)風(fēng)格，相比其它幾個(gè)框架稍遜一籌。

其中 Bootstrap 和 Semantic 是面向?qū)ο蟮淖詈皿w現(xiàn)。

我先說一下 Bootstrap 的優(yōu)勢(shì)，不是設(shè)計(jì)風(fēng)格，不是模塊，不是特效，而是柵格，響應(yīng)式柵格。Bootstrap 的柵格在與其它框架對(duì)比中占有絕對(duì)優(yōu)勢(shì)，無論是柵格的劃分還是類名的風(fēng)格都堪稱經(jīng)典。如果讀者有心看一下 Bootstrap 的 Less 源文件，就會(huì)感受到 Bootstrap 對(duì)于響應(yīng)式柵格的獨(dú)具匠心。其實(shí)在 Bootstrap 之前也有很多柵格方案，但是給人的感覺就是不夠利索，類名繁瑣不好記。而后來的很多框架，尤其輕量級(jí)的框架大多都有 Bootstrap 的影子。

下面我們通過對(duì)比幾個(gè)框架的柵格和按鈕來看一下類命名的策略。

Bootstrap

<div class="row"> <div class="col-md-8"></div> <div class="col-md-4"></div></div><button class="btn btn-primary" type="submit">Button</button>

Semantic

<div class="ui grid"> <div class="ten wide column"></div> <div class="six wide column"></div></div>
<button class="ui primary basic button">Primary</button>

Foundation

<div class="row"> <div class="small-3 columns"></div> <div class="small-9 columns"></div></div>
<button type="button" class="primary button">Primary</button>

UIkit

<div class="uk-grid"> <div class="uk-width-1-2"></div> <div class="uk-width-1-2"></div></div>
<button class="uk-button uk-button-primary" type="button">Primary</button>

Pure

<div class="pure-g"> <div class="pure-u-1-2"></div> <div class="pure-u-1-2"></div></div>
<button class="pure-button pure-button-primary">A Primary Button</button>

通過上面的對(duì)比，大家應(yīng)該已經(jīng)發(fā)現(xiàn)了這些框架的命名策略的不同。不可否認(rèn)，Bootstrap 的命名最經(jīng)典。

之前在網(wǎng)上看到有人討論關(guān)于框架的易用性，有人說 Bootstrap 的類名太長(zhǎng)，然而通過上面幾個(gè)框架的對(duì)比，Bootstrap 的類并不繁瑣，而且用預(yù)處理器編寫框架時(shí)嵌套會(huì)比較靈活。

Semantic 的類名最簡(jiǎn)潔，通過多個(gè)定語的修飾組成一句話，確實(shí)很有意思。但是過多的修飾類在編寫框架時(shí)會(huì)稍顯凌亂，有利有弊，因人而異吧。

Foundation 的柵格應(yīng)該是最豐富的，策略上類似 Bootstrap，只是對(duì)公共屬性進(jìn)行了拆分，大家也可以看看其中的具體細(xì)節(jié)。

UIkit 和 Pure 的策略相同，都加了前綴以區(qū)分其它框架，但是很顯然類名過于冗長(zhǎng)了。我在編寫框架時(shí)也這樣想過，但是最終放棄了這種方式。

關(guān)于 CSS 預(yù)處理器

CSS 預(yù)處理器早已不是什么新鮮事，但是真正能夠在工作中運(yùn)用的人有多少呢？熟練使用預(yù)處理器特性的人又有多少呢？

我之前工作的時(shí)候也沒有用預(yù)處理器，因?yàn)椴挥茫砸惨庾R(shí)不到預(yù)處理器的好處。主要是覺得麻煩，因?yàn)橐褂镁幾g器編譯一下，還不如直接寫 CSS 方便。但是在項(xiàng)目維護(hù)的時(shí)候就意識(shí)到預(yù)處理器的好處。

后來在幾個(gè)項(xiàng)目中嘗試了預(yù)處理器，但是對(duì)于模塊化的寫法不太明確。預(yù)處理器作為工具，可以實(shí)現(xiàn)模塊化編寫 CSS，那么應(yīng)該如何劃分模塊？另外，預(yù)處理器有很多特性，但是大多數(shù)人剛開始只用到變量和嵌套，其它的特性幾乎很少用到。我相信在自己動(dòng)手實(shí)現(xiàn)一個(gè)輕量級(jí)框架的過程中，我們可以對(duì)預(yù)處理器有一個(gè)全面的了解。

目前流行的預(yù)處理器有 Less，Sass，Stylus 三個(gè)，選擇哪個(gè)完全是看自己的習(xí)慣。我最開始因?yàn)?Bootstrap 了解的 Less，但是因?yàn)榱?xí)慣選擇了 Sass，其次 Sass 的功能要更全面一些。

無論是工作還是自己寫項(xiàng)目，都要搭建一個(gè)項(xiàng)目環(huán)境，也就是安裝一系列的 npm 包。相比刀耕火種的開發(fā)方式，使用工具開發(fā)的前期準(zhǔn)備過程稍顯麻煩，然而一旦環(huán)境建好，后期的開發(fā)將會(huì)游刃有余。

Miligram 這個(gè)輕量級(jí)框架在 Github 上有很高人氣，但是說實(shí)話，用處并不大。不過這個(gè)框架的構(gòu)建方式非常值得學(xué)習(xí)。雖然 CSS 對(duì)于很多人來說很簡(jiǎn)單，但是真要去寫一個(gè)框架，還是非常棘手，這時(shí)候就需要借鑒一些優(yōu)秀的框架。

編寫框架大致會(huì)用到的 npm 如下：

--autoprefixer--node-sass--npm-run-all--rimraf--onchange

其實(shí)最主要的就是一個(gè) node-sass，其它的都是輔助 CSS 文件的生成修改，大家感興趣的話可以去 npm 官網(wǎng)搜索這些插件，了解具體用法，如有不懂可以給我留言，我就不啰嗦了。

編寫輕量級(jí)框架

終于到了本篇文章的重頭戲。

簡(jiǎn)單介紹一下，我給自己編寫的框架取名 Snack，原意“快餐”，主要表達(dá)簡(jiǎn)單之意。雖然是輕量級(jí)框架，但我并不想拿輕量級(jí)做為噱頭，畢竟體量輕意味著某些功能的缺失以及疏漏。這個(gè)框架的意義更多的是交流學(xué)習(xí)，我試圖借鑒其它框架的優(yōu)秀之處，盡量簡(jiǎn)化類名，以及嘗試探索一些更通用的組件。

大多數(shù)的輕量級(jí)框架只是 CSS 框架，不涉及 JS 部分，主要用于網(wǎng)頁的布局。我之所以打算自己編寫框架，是因?yàn)楣ぷ髦兄貜?fù)的東西太多，通過框架可以很好的將這些零散組件整合到一起。另一方面，寫個(gè)小項(xiàng)目，學(xué)點(diǎn)新知識(shí)是一件趣事。

編寫框架是去年想做的事情，但因?yàn)闀r(shí)間原因，拖了很久。寫框架之初我曾陷入一個(gè)誤區(qū)，我打算設(shè)計(jì)一些比較前衛(wèi)的樣式，立體的按鈕、浮動(dòng)的面板等，比如下圖中的風(fēng)格。

https://dribbble.com/shots/524593-Soft-Interface-Black

但是在斷斷續(xù)續(xù)編寫框架的過程中，我逐漸找到了方向，上圖的樣式只是一種皮膚，編寫框架之初不應(yīng)該把重點(diǎn)放在這上面。當(dāng)然，好的 UI 設(shè)計(jì)也是框架成功的一部分。

模塊劃分

編寫框架的第一步就是要確定框架應(yīng)該包含哪些模塊。因?yàn)槭禽p量級(jí)框架，所以模塊肯定沒有重量級(jí)框架那么全面，只有核心的一些組件。通過比較一些輕量級(jí)框架以及工作總結(jié)，大致常用的模塊包括柵格、媒體、按鈕、排版、表單、表格、面板以及輔助工具。

在常用的這幾個(gè)組件中，需要重點(diǎn)關(guān)注的是柵格、表單及面板，媒體組件也很重要，但是自由發(fā)揮的空間不大，我直接用了 Bootstrap 的媒體組件。

命名策略

首先是類命名的層次與結(jié)構(gòu)。類命名一直是我比較糾結(jié)的地方，剛開始工作的時(shí)候?yàn)榱似鹨粋€(gè)見名知意又簡(jiǎn)潔的類名總是抓耳撓腮。我在編寫框架時(shí)盡量避免與 Bootstrap 的類名重疊，但也不能完全避免。對(duì)比其他框架會(huì)發(fā)現(xiàn)，這種情況不可避免的會(huì)出現(xiàn)，畢竟類名會(huì)有一定的規(guī)律性以及層次性。在這一點(diǎn)上我比較喜歡 Bootstrap 的風(fēng)格。下面和 Bootstrap 的表單做一個(gè)對(duì)比。

Bootstrap 的表單結(jié)構(gòu)及類名

--div.form-horizontal --div.form-group --label.control-label --input.form-control

Snack 的表單結(jié)構(gòu)及類名

--div.form-row --div.form-item --label.form-label --input.form-field

這個(gè)表單結(jié)構(gòu)整體而言還算不錯(cuò)，只是個(gè)別地方需要修改。有一些框架不給input等元素起類名，而是給父元素一個(gè)類名，個(gè)人對(duì)這種做法表示疑問，不起類名會(huì)降低框架編寫及使用的靈活性。

第二個(gè)策略是組件的修飾，比如按鈕及面板都存在多個(gè)語境（顏色、大小等），在這一點(diǎn)上我編寫框架時(shí)做了一些簡(jiǎn)化，風(fēng)格上有些 Semantic 的影子。

<button class="btn primary">primary</button><table class="table bordered striped">...</table><div class="boxes primary">...</div>

關(guān)于修飾類的策略是一個(gè)仁者見仁智者見智的問題，至于哪種方法更好，還需要在編寫框架的過程中摸索。

柵格系統(tǒng)

演示示例: https://nzbin.github.io/snack/#grid

任何框架必須建立在柵格的基礎(chǔ)上才能靈活布局。我在前面提到了 Bootstrap 的精華就是柵格系統(tǒng)。柵格系統(tǒng)的編寫需要使用預(yù)處理器的循環(huán)功能，否則就要做無謂的重復(fù)勞動(dòng)了。我遇到過一些輕量級(jí)框架是用 Less 編寫的，其柵格系統(tǒng)就沒有用循環(huán)，這樣的源碼稍顯唐突，可能是作者對(duì) Less 的循環(huán)功能不熟，當(dāng)然 Less 本身的循環(huán)比較弱，用起來有些別扭。

關(guān)于預(yù)處理器的循環(huán)，可以參照我之前翻譯的《CSS 預(yù)處理器中的循環(huán)》，比較詳細(xì)地對(duì)比了三種流行預(yù)處理器的循環(huán)功能。簡(jiǎn)單說一下，Less 沒有循環(huán)，但可以用遞歸實(shí)現(xiàn)，而 Sass 和 Stylus 有真循環(huán)。

我編寫的柵格系統(tǒng)也是默認(rèn) 12 列，但是后來發(fā)現(xiàn) 12 列的柵格缺少最常用的列寬（比如 10%、20%、30%等），比如下面 CodePen 展示的例子用 12 列柵格是無法完成的，所以我又添加了 10 列柵格，但仍然無法面面俱到，不過已經(jīng)很靈活了。

柵格的使用和 Bootstrap 是一樣的，除了 12 列柵格外，10 列柵格以及均分柵格都要添加.cols-類

<!-- 默認(rèn) 12 列柵格，所以省略 cols-12 --><div class="row"> <div class="col-5"></div> <div class="col-7"></div></div>
<!-- 10 列柵格 --><div class="row cols-10"> <div class="col-3"></div> <div class="col-7"></div></div>

這個(gè)柵格并沒有響應(yīng)式，只有一個(gè)斷點(diǎn)，小屏手機(jī)上的話所有柵格都會(huì)單行顯示。一方面，這樣的設(shè)計(jì)符合大多數(shù)輕量級(jí)框架的初衷；另一方面，我打算再寫一個(gè)針對(duì)移動(dòng)端的框架，畢竟 Web 端和移動(dòng)端的風(fēng)格差距較大，按照業(yè)務(wù)需求分開會(huì)更好。不過最近我更改了源文件，為響應(yīng)式預(yù)留了擴(kuò)展方式。

表單

演示示例: https://nzbin.github.io/snack/#forms

在上面的命名策略中已經(jīng)展示了 Snack 表單的基本結(jié)構(gòu)，基本表單除了結(jié)構(gòu)之外，樣式上并沒有太多可以討論的地方。在此說一下表單中checkbox的結(jié)構(gòu)調(diào)整，先看一下 Bootstrap 的checkbox結(jié)構(gòu)。

<!-- checkbox --><div class="checkbox"> <label> <input type="checkbox" value=""> checkbox </label></div>
<!-- checkbox-inline --><label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> checkbox</label>

以上兩種結(jié)構(gòu)不能有偏差，稍有偏差樣式就會(huì)錯(cuò)亂，靈活性較差。其次我在想兩種結(jié)構(gòu)能不能整合在一起，增強(qiáng)靈活性。想了很久，找到了方法，Snack 結(jié)構(gòu)如下：

<!-- checkbox --><div class="checkbox"> <label> <input type="checkbox" value=""> checkbox </label></div>
<!-- checkbox-inline --><div class="checkbox inline"> <label> <input type="checkbox" value=""> checkbox </label></div>

也可以將樣式直接加到label標(biāo)簽上。另外，如果將input移到label標(biāo)簽外也是沒有問題的，如下：

<!-- checkbox --><div class="checkbox"> <input type="checkbox" id="checkbox1" value=""> <label for="checkbox1">checkbox</label></div>
<!-- checkbox-inline --><div class="checkbox inline"> <input type="checkbox" id="inlineCheckbox1" value=""> <label for="inlineCheckbox1">checkbox</label></div>

這種結(jié)構(gòu)有一個(gè)好處，就是可以自定義input樣式，詳見下面的 CodePen 的scss文件。radio的設(shè)置和checkBox是一樣的。

輔助類

輔助類是一系列類的組合，比如字號(hào)大小、顏色值、padding、margin 以及左右浮動(dòng)等。在一些 Bootstrap 搭建的后臺(tái)管理系統(tǒng)中尤為常見，這樣布局起來就會(huì)比較靈活。以下是一個(gè)邊框的輔助類。

.border-left-right { border-left: 1px solid #eee; border-right: 1px solid #eee;}.border-top-bottom { border-top: 1px solid #eee; border-bottom: 1px solid #eee;}.border-left { border-left: 1px solid #eee;}.border-right { border-right: 1px solid #eee;}.border-top { border-top: 1px solid #eee;}.border-bottom { border-bottom: 1px solid #eee;}

關(guān)于助類的更多內(nèi)容可以搜索閱讀這篇文章《如何編寫通用的 Helper Class》

盒組件

演示示例: https://nzbin.github.io/snack/#boxes

盒組件是我整個(gè)框架中比較滿意的一個(gè)模塊。之所以要做這個(gè)組件主要是覺得 Bootstrap 的 list 組件和 panel 組件可以整合到一起。當(dāng)然，這樣的做法有利有弊。盒組件在后臺(tái)管理系統(tǒng)的布局中表現(xiàn)的尤為突出。

其命名也是多種多樣，比如 panel、widget、portlet、ibox、card等，每個(gè)后臺(tái)管理系統(tǒng)框架都會(huì)對(duì)這個(gè)組件進(jìn)行深度開發(fā)，可見其在布局上的重要性。給一個(gè)組件起一個(gè)合適的類名也很關(guān)鍵，想了很久，最后用了box的類名，當(dāng)然一般情況下盡量不要用box，因?yàn)檫@個(gè)類名比較寬泛。下面的 CodePen 模擬了 Bootstrap 的 list 及 panel 組件。

主題

給框架添加主題是一件有趣的事情。Snack 的默認(rèn)主題是白色，因?yàn)橄矚g黑色，最后添加了暗夜主題，編寫主題只需改變組件的顏色。演示文檔的頁面用了暗夜主題，點(diǎn)擊上方的紅色按鈕可以切換主題。

總結(jié)

如果大家問我那個(gè)框架更好，我會(huì)毫不猶豫的選擇 Bootstrap。在工作中可以根據(jù)需求的難易進(jìn)行框架選擇，如果業(yè)務(wù)比較重，最好根據(jù) Bootstrap 進(jìn)行二次開發(fā)；反之，可以選擇一些輕量級(jí)框架，最好還是根據(jù)自己的需求造輪子，如果大家愿意選擇或是借鑒我的框架，那會(huì)是我的榮幸。

Github: https://github.com/nzbin/snack

Docs: https://nzbin.github.io/snack

在線咨詢

上一篇：藍(lán)易云 - HTTP/HTTPS以及XSS攻擊詳解
下一篇：PHP開發(fā)零基礎(chǔ)到高手是怎么煉成的附帶網(wǎng)盤下載

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商