bootstrap的多種樣式
"css中有的bootstrap都有,css沒(méi)有的bootstrap都有,只有想不到?jīng)]有找不到!!"
bootstrap的所有樣式是基于css樣式派生出來(lái)的
例如表單元素的bootstrap優(yōu)化:
如果需要使用該樣式可以在官網(wǎng)中到直接'copy'
除了表單樣式還有很多
比如:
按鈕的樣式:
表格的各種樣式:
bootstrap的組件
說(shuō)起組件就不得不聊起控件,組件和框架的區(qū)別了:
控件:控制程序的按鍵
任意打開(kāi)一個(gè)App或者一個(gè)網(wǎng)頁(yè)，應(yīng)該很常見(jiàn)輸入框凉蜂、按鈕琼梆、單選框、復(fù)選框等等的控件窿吩，控件表示程序設(shè)計(jì)中最小粒度的可復(fù)用可編程的部件茎杂，就像化學(xué)周期表中的每個(gè)元素一樣，「氫氦鋰鈹硼」都是不可分割的纫雁，但是它們可以組成的物質(zhì)不計(jì)其數(shù)煌往，難道一個(gè)網(wǎng)頁(yè)或一個(gè)App不是由這些最小的控件組成的嗎？
組件:組合功能的控件
有一個(gè)「組」字先较，可以簡(jiǎn)單理解為是一個(gè)組合功能的控件携冤，功能比控件要復(fù)雜悼粮，可能存在比較復(fù)雜的交互闲勺。說(shuō)起來(lái)太拗口了，還是說(shuō)說(shuō)實(shí)例扣猫，比如TabHost（腦補(bǔ)下進(jìn)入微信的界面菜循，最下面有4個(gè)按鈕），它具備了加入若干個(gè)頁(yè)面申尤，并定義了按Tab切換的交互癌幕，是由最基本的按鈕控件和其他控件一起組合而成，這種稱為組件昧穿。系統(tǒng)也提供很多組件勺远，它包含了許多行為和屬性，而控件更單一时鸵，更細(xì)粒度胶逢。當(dāng)然你說(shuō)把組件叫成控件可以不厅瞎？也沒(méi)有什么不可以，可以把它理解為功能復(fù)雜的最小單位初坠。
框架:由很多的控件和組件組裝在一起,并且能夠在某一領(lǐng)域完成一系列操作
由很多控件和組件組裝在一起和簸，并且能夠在某一領(lǐng)域里面完成一系列操作，理解為一把「瑞士軍刀」碟刺，能夠把某一領(lǐng)域內(nèi)的問(wèn)題完成的干凈漂亮锁保。比如：jQuery框架是對(duì)原生js的封裝，提供更方便快捷的JS操作半沽。J2EE框架提供了一套企業(yè)級(jí)的網(wǎng)站解決方案爽柒。LAMP提供了一套利用開(kāi)源系統(tǒng)搭建網(wǎng)站的框架。如果你接觸過(guò)剛才提到的技術(shù)抄囚，就比較容易什么是框架了霉赡，有的框架提供了更友好、更快捷幔托、更豐富的解決方案穴亏。有的是將各種技術(shù)組合，來(lái)使其對(duì)解決某一類問(wèn)題（比如搭建網(wǎng)站）更加容易使用和快捷重挑。
說(shuō)回bootstrap組件,如上文所示,該組件囊括了許多可復(fù)用的字體圖標(biāo)嗓化、下拉菜單、導(dǎo)航谬哀、警告框刺覆、彈出框等功能。
如何使用bootstrap組件:
出于性能的考慮史煎，所有圖標(biāo)都需要一個(gè)基類和對(duì)應(yīng)每個(gè)圖標(biāo)的類谦屑。把下面的代碼放在任何地方都可以正常使用。注意篇梭，為了設(shè)置正確的內(nèi)補(bǔ)（padding）氢橙，務(wù)必在圖標(biāo)和文本之間添加一個(gè)空格。
使用注意:
可以將組件中的矢量圖添加到按鈕,導(dǎo)航,工具條等等地方:
還可以導(dǎo)入下拉菜單:
1)導(dǎo)入下拉菜單要先引入jquery再引入bootstrap的js文件
2)copy代碼!!修改你的內(nèi)容
也能引入導(dǎo)航欄:
步驟同上要先引入jquery再引入bootstrap的js文件,復(fù)制粘貼!
可以使用進(jìn)度條來(lái)查看文件進(jìn)行到哪一步
步驟同上要先引入jquery再引入bootstrap的js文件,復(fù)制粘貼!
總結(jié):bootstrap是非常方便的開(kāi)發(fā)工具,不管是是使用柵格框架,還是使用css的樣式,但前提是會(huì)熟練掌握css和html技術(shù),不然你連哪錯(cuò)了都不知道(廢話(滑稽)
以上圖片來(lái)自bootstrap官網(wǎng),若此簡(jiǎn)書(shū)中有沒(méi)講到的地方,歡迎大家去官網(wǎng)查找!!
上面講控件,組件,插件的區(qū)別的那段來(lái)自于下面的簡(jiǎn)書(shū)作者↓ ↓ ↓? 感謝!!
作者：IvanHung
鏈接：http://www.reibang.com/p/9e5ce5312439
來(lái)源：簡(jiǎn)書(shū)
著作權(quán)歸作者所有恬偷。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)悍手，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
