想要建設(shè)一個網(wǎng)站，網(wǎng)頁設(shè)計是必不可少的一環(huán)，網(wǎng)頁制作的過程中，對于新手和小白來說，最難的就是網(wǎng)頁制作中的js和網(wǎng)頁布局了。而js有各種各樣的開源框架和js插件，隨意就能找到一個自己想用的js插件。但是頁面的布局始終是一個難點，今天小編就給介紹一款插件“l(fā)ayoutlt!”。

layoutlt是bootstrap中的一個可視化布局工具。對于布局生疏或者不會布局的小伙伴們是一個比較好的布局工具。布局的時候只需要打開在線工具然后看著左邊的菜單選擇自己需要的布局格式或者組件，拖動到右方就可以完成一行的布局了，很簡單有沒有啊。

左側(cè)的菜單提供了常用的布局方式，還有網(wǎng)頁中經(jīng)常用到的各種樣式，組件。想想只需要拖動一下就可以完成一個網(wǎng)頁的導(dǎo)航欄，無論是表單還是輪播圖都是拖動一鍵完成的，可以大大提高開發(fā)效率的。

而且要在組件中寫文字也很方便，只需要將鼠標放在需要寫入文字的組件中點擊編輯按鈕就可以直接寫文字了。

布局和編輯好了之后可以直接點擊上面的保存按鈕，然后點擊下載按鈕，里面共生成兩套代碼，一套是自適應(yīng)的代碼，一套是固定寬高的代碼，選擇自己需要的代碼就可以直接復(fù)制其中的代碼加入到自己的HTML文件中去，而且生成的代碼很干凈，層次也比較分明。

當然直接粘貼到您html中的代碼還不能直接使用，還需要鏈接bootstrap.css文件和bootstrap.js文件，bootstrap中有提供下載的路徑和方法。如果您的代碼中還需要別的js功能的話，建議去插件庫找一找，然后也是復(fù)制粘貼下來就可以了。

最后在您填好內(nèi)容，定義好字體大小以及寬高，行高和圖片之后，您的網(wǎng)頁就算是做好了。是不是很簡單呢？？

如果您學會了得話就趕快去設(shè)計您的網(wǎng)頁去吧！