bootstrap學習細節筆記

  • favicon.icon 這個文件總是被忽略,但是有可能在你調試主頁的時候會發現有一個favicon.icon這個文件並沒有接收到,favicon還是挺重要的,瀏覽器可以將favicon顯示於瀏覽器的地址欄中,也可置於書籤列表的網站名前,還可以放在標籤式瀏覽界面中的頁標題前。

http://www.chami.com/html-kit/services/favicon/ 這是一個比較好用的在線製作favicon的網站

  • 前端如果是用類似bootstrap之類的框架,儘量不要全用默認編譯好的css等,可以自己通過less編譯出自己喜歡的樣式,也可以去github上看一些開源的項目,,注意的是bootstrap3至少要1.11.3以上的jquery支持,否則默認封裝好的js代碼就會無效

  • bootstrap中圖標的使用,默認的圖標來源於 Glyphicon Halflings ,要使用一個圖標的方式是先把一個button寫出來,然後用button包裹住一個span,這個span中就用class定義圖標的樣式以及文字
<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
  • 在bootstrap 中的aria相關屬性,比如aria-hidden,aria-label,其實都是用於屏幕閱讀器的,幫助殘障人士更好的訪問網站,默認true就可以了。

這是一篇關於使用方法的詳細博客http://www.cnblogs.com/yilian/archive/2011/05/23/aria.html

  • 還有專爲殘障人士設計的sr-only系統,全稱其實就是screen reader only,它可以把圖標讀出來,其實就是把圖標的意思設置出來,然後通過屏幕閱讀器就可以使用了,非常的方便
<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>
這裏的聲明要注意的是用role而不是type,先放一個警告的圖標,然後彈出這個圖標表達的意思

JS控制的data系列參數

名稱類型默認值描述
backdropboolean或字符串’static’trueIncludes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn’t close the modal on click.
keyboardbooleantrue鍵盤上的 esc 鍵被按下時關閉模態框。
showbooleantrue模態框初始化之後就立即顯示出來。
remotepathfalse如果提供的是 URL,將利用 jQuery 的 load 方法從此 URL 地址加載要展示的內容(只加載一次)並插入 .modal-content 內。如果使用的是 data 屬性 API,還可以利用 href 屬性指定內容來源地址。

經常會使用到data-toggle,toggle()方法在jQuery中是切換元素的可見狀態
  • bootstrap carousel 輪播功能,其實沒太多說的,按照模板即可,其中標籤中一般要定義上alt參數,用於圖片的說明
注意拆分問題的解決方法,比如我要實現一個僞gif圖的形式,那麼首先,我們應該把一張張jpg型圖片引進去,然後通過後端邏輯處理來拆分得到

題外話

browsersync 這個工具在ubuntu上安裝可能會遇到如下的問題
Ubuntu下提示/usr/bin/env: node: 沒有那個文件或目錄
解決方法

由於Ubuntu下已經有一個名叫node的庫,因此Node.js在ubuntu下默認叫nodejs,需要額外處理一下

http://stackoverflow.com/questions/18130164/nodejs-vs-node-on-ubuntu-12-04

sudo ln -s /usr/bin/nodejs /usr/bin/node
  • psd格式文件:photoshop document ,PSD格式在保存時會將文件壓縮,以減少佔用磁盤空間,但PSD格式所包含圖像數據信息較多(如圖層、通道、剪輯路徑、參考線等),因此比其他格式的圖像文件還是要大得多。由於PSD文件保留所有原圖像數據信息,因而修改起來較爲方便
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章