
三. 停筆
對于 Bootstrap 框架來說,整合的停筆字體是Font Awesome(Shifticons也是一個不錯的選擇),和谷歌的字體處事一樣也是免費開源的。要使用它只需將其下載下來,然后在根目錄下建樹 /fonts/ 文件夾,將其放進去。然后再將 font-awesome.css 文件放到 /css/ 目錄文件夾。


四. CSS3
將膳縵沔都搞定后接下來要做的就是再加點 CSS3 特效了,如不美觀時刻不夠的話簡單的添加上盒暗影box-shadow和字體暗影text-shadow就可以讓網站增色不少,CSS 代碼如下。
h1 { text-shadow: 1px 1px 1px #ccc; } .div-that-you want-to-stand-out { box-shadow: 0 0 1em 1em #ccc; }
如不美觀時刻足夠的話還可以添加一個放射漸變填充效不美觀,可以讓問題的顯示效不美觀更重一些,如下面臨比圖所示。(如不美觀想要更多 CSS 效不美觀的話可以去進修一下 CodeSchool 的在線教程)

五. jQuery
其實到這里了話網站看起來已經很不錯了,但為了讓它加倍個性化,還需要再添加上一張布景圖片。對良多軌范員來嗣魅這一步是斗勁難以進行的,那媚暌功該若何選擇一張設計師可能會使用的圖片呢?謎底就是去iStockPhoto或近似的付費圖庫中去尋找。
首先需要付費下載布景圖片,然后放到 /img/ 文件目錄中去。
將此圖片設置為的布景圖(background-image): $
到這幾乎差不多已經完成調整了,但如不美觀你夠細心的話會發現按鈕以及導航菜單的顏色仍是 Bootstrap 默認的藍色系。在有著設計師存在網站,設計師城市負責進行網站色調的調整,為了保證網站的一致性,所有按鈕和導航一般是三到四種顏色(更多可以查看極客公園之間的文章小按鈕年夜學問)。
一. 字體
使用 GIMP 的取色器篡奪布景圖片的主題顏色,確認其 GBR 十六進制值;
使用 Color Scheme Designer確認與差異年夜但同時又互補的顏色;
最后按照確定的顏色來擬定按鈕,可以用[Bootstrap Buttons][]等在線直接生成。
添加紋理前后對比(年夜圖)
結語
此外,除了谷歌的字體處事外還可以使用像 Fontdeck或 Typekit 字體處事,它們的字體更多,更多的字體搭配方案可以參考Type Connection。
如不美觀履歷過了膳縵沔所說的流程的話,相信你已經可以在斗勁短的時刻內建造出了一個還能拿得出手的網站了。
接著將引用寫入網頁頭部中,代碼為 ,這時辰我們可以隨時在網站上肆意處所自由使用這些停筆字體了,如要想將一個卡車停筆添加到注冊按鈕的話只需聲明一下就可以, Sign up today。同時為了防止插手停筆字體后引起按鈕拉伸變形,還需要一點點額外的工作,將按鈕寬度加年夜一點(.jumbotron .btn i { margin-right: 8px; })。最后效不美觀如下:
在網頁頭部中插手此代碼:
除非出格聲明,極客不雅察看均為極客公園原創報道,轉載請注明原文鏈接。
推薦閱讀
由上述線索,可以剖析出360的電商成長策略: 我們可以年夜本次360與樂蜂網的合作來尋找一些蛛絲馬跡: 3、年夜360購物商城來看,360今朝合作的對象首要都是年夜型垂直電商,京東、凡客誠品赫然在列。 1、樂蜂網是面向>>>詳細閱讀
地址:http://www.xglongwei.com/a/22/20130417/265649.html