bootstrap前端框架筆記

本人技拙靶擦,還望不吝賜教监徘。

bookstrap筆記? ? ? 1.BookStrap是輕量級的CSS基礎(chǔ)代碼牍氛。大部分前端人員都具歸零的思想 2.各瀏覽器的初始標(biāo)準(zhǔn)都不一樣,因此要做到兼容就要初始瀏覽器的CSS樣式增炭,目前比較實用的全局初始有兩中: Eric Meyer Reset CSS 和 YUI reset css3.Rel是relationship的英文縮寫忍燥,它描述了當(dāng)前頁面與href所指定文檔的關(guān)系;stylesheet就是樣式表的意思隙姿;CSS是 Cascading Style Sheet(級聯(lián)樣式表)的縮寫4.font-weight 設(shè)置成normal變成了常規(guī)效果(不加粗)? 可以設(shè)置*** 為副標(biāo)題5.如果想讓一個段落p突出顯示梅垄,可以通過添加類名“.lead”實現(xiàn),其作用就是增大文本字號输玷,加粗文本队丝,而且對行高和margin也做相應(yīng)的處理。6.標(biāo)簽總結(jié):強(qiáng)調(diào)相關(guān)的類在Bootstrap中除了使用標(biāo)簽欲鹏、等說明正文某些字詞机久、句子的重要性,Bootstrap還定義了一套類名赔嚎,這里稱其為強(qiáng)調(diào)類名(類似前面說的“.lead”),這些強(qiáng)調(diào)類都是通過顏色來表示強(qiáng)調(diào)膘盖,具本說明如下:.text-muted:提示,使用淺灰色(#999).text-primary:主要尤误,使用藍(lán)色(#428bca).text-success:成功侠畔,使用淺綠色(#3c763d).text-info:通知信息,使用淺藍(lán)色(#31708f).text-warning:警告损晤,使用黃色(#8a6d3b).text-danger:危險软棺,使用褐色(#a94442).text-muted {color: #999;}.text-primary {color: #428bca;}a.text-primary:hover {color: #3071a9;}.text-success {color: #3c763d;}a.text-success:hover {color: #2b542c;}.text-info {color: #31708f;}a.text-info:hover {color: #245269;}.text-warning {color: #8a6d3b;}a.text-warning:hover {color: #66512c;}.text-danger {color: #a94442;}a.text-danger:hover {color: #843534;}文本對齊風(fēng)格在排版中離不開文本的對齊方式。在CSS中常常使用text-align來實現(xiàn)文本的對齊風(fēng)格的設(shè)置沉馆。其中主要有四種風(fēng)格:? 左對齊码党,取值left? 居中對齊,取值center? 右對齊斥黑,取值right? 兩端對齊,取值justify為了簡化操作眉厨,方便使用锌奴,Bootstrap通過定義四個類名來控制文本的對齊風(fēng)格:? .text-left:左對齊? .text-center:居中對齊? .text-right:右對齊? .text-justify:兩端對齊.text-left {text-align: left;}.text-right {text-align: right;}.text-center {text-align: center;}.text-justify {text-align: justify;}列表--簡介在HTML文檔中,列表結(jié)構(gòu)主要有三種:有序列表憾股、無序列表和定義列表鹿蜀。具體使用的標(biāo)簽說明如下:無序列表

有序列表

定義列表

Bootstrap根據(jù)平時的使用情形提供了六種形式的列表:? ? 普通列表? ? 有序列表? ? 去點列表? ? 內(nèi)聯(lián)列表? ? 描述列表? ? 水平描述列表列表--無序列表箕慧、有序列表無序列表無序列表和有序列表使用方式和我們平時使用的一樣(無序列表使用ul,有序列表使用ol標(biāo)簽)茴恰,在樣式方面颠焦,Bootstrap只是在此基礎(chǔ)上做了一些細(xì)微的優(yōu)化,源碼請查看bootstrap.css文件的第569行~第579行:ul,ol {? margin-top: 0;? margin-bottom: 10px;}ul ul,ol ul,ul ol,ol ol {? margin-bottom: 0;}從源碼上我們可以得知往枣,Bootstrap對于列表伐庭,只是在margin上做了一些調(diào)整。我們來看一個簡單的示例(右側(cè)代碼編輯器10-16行)分冈。列表嵌套在Bootstrap中列表也是可以嵌套的圾另,如右側(cè)編輯器中的代碼就是有序列表(25-35行)。列表--內(nèi)聯(lián)列表Bootstrap像去點列表一樣雕沉,通過添加類名“.list-inline”來實現(xiàn)內(nèi)聯(lián)列表集乔,簡單點說就是把垂直列表換成水平列表,而且去掉項目符號(編號)坡椒,保持水平顯示扰路。也可以說內(nèi)聯(lián)列表就是為制作水平導(dǎo)航而生靠粪。列表--定義列表對于定義列表而言兔簇,Bootstrap并沒有做太多的調(diào)整藻治,只是調(diào)整了行間距骂租,外邊距和字體加粗效果扔茅。dl {margin-top: 0;margin-bottom: 20px;}dt,dd {line-height: 1.42857143;}dt {font-weight: bold;}dd {margin-left: 0;}代碼(一)本節(jié)內(nèi)容相對來說比較簡單贤斜,一般在個人博客上使用的較為頻繁洁仗,用于顯示代碼的風(fēng)格脾还。在Bootstrap主要提供了三種代碼風(fēng)格:1肥印、使用來顯示單行內(nèi)聯(lián)代碼2识椰、使用

來顯示多行塊代碼3、使用來顯示用戶輸入代碼預(yù)編譯版本的Bootstrap將代碼的樣式單獨提取出來:1深碱、LESS版本腹鹉,請查閱code.less文件2、Sass版本敷硅,請查閱_code.scss文件編譯出來的CSS代碼請查閱bootstrap.css文件第688行~第730行功咒,由于代碼太長,此處不一一列舉绞蹦。在使用代碼時力奋,用戶可以根據(jù)具體的需求來使用不同的類型:1、:一般是針對于單個單詞或單個句子的代碼2幽七、

:一般是針對于多行代碼(也就是成塊的代碼)3景殷、:一般是表示用戶要通過鍵盤輸入的內(nèi)容雖然不同的類型風(fēng)格不一樣,但其使用方法是類似的。code風(fēng)格:

Bootstrap的代碼風(fēng)格有三種:

不管使用哪種代碼風(fēng)格猿挚,在代碼中碰到小于號(<)要使用硬編碼“<”來替代咐旧,大于號(>)使用“>”來替代。而且對于

代碼塊風(fēng)格绩蜻,標(biāo)簽前面留多少個空格铣墨,在顯示效果中就會留多少個空格。建議在編寫HTML標(biāo)簽時办绝,就控制好伊约,例如查看右側(cè)代碼編輯器上的15-19行。表格表格是Bootstrap的一個基礎(chǔ)組件之一八秃,Bootstrap為表格提供了1種基礎(chǔ)樣式和4種附加樣式以及1個支持響應(yīng)式的表格碱妆。在使用Bootstrap的表格過程中,只需要添加對應(yīng)的類名就可以得到不同的表格風(fēng)格昔驱,在接下來的內(nèi)容中疹尾,我們會詳細(xì)介紹Bootstrap的表格使用。表格表格是Bootstrap的一個基礎(chǔ)組件之一骤肛,Bootstrap為表格提供了1種基礎(chǔ)樣式和4種附加樣式以及1個支持響應(yīng)式的表格纳本。在使用Bootstrap的表格過程中,只需要添加對應(yīng)的類名就可以得到不同的表格風(fēng)格腋颠,在接下來的內(nèi)容中繁成,我們會詳細(xì)介紹Bootstrap的表格使用。同樣的淑玫,如果你對CSS預(yù)處理器熟悉巾腕,你可以使用Bootstrap提供的預(yù)處理版本:? ? LESS版本,對應(yīng)的文件是 tables.less? ? Sass版本絮蒿,對應(yīng)的文件是 _tables.scss如果你不懂LESS或Sass也不妨尊搬,你在bootstrap.css文件中第1402行~第1630行中可以查閱到所有有關(guān)于table的樣式代碼。由于代碼太長土涝,此處不一一列舉佛寿。剛已經(jīng)說了,Bootstrap為表格不同的樣式風(fēng)格提供了不同的類名但壮,主要包括:? ? .table:基礎(chǔ)表格? ? .table-striped:斑馬線表格? ? .table-bordered:帶邊框的表格? ? .table-hover:鼠標(biāo)懸停高亮的表格? ? .table-condensed:緊湊型表格? ? .table-responsive:響應(yīng)式表格水平表單Bootstrap框架默認(rèn)的表單是垂直顯示風(fēng)格冀泻,但很多時候我們需要的水平表單風(fēng)格(標(biāo)簽居左,表單控件居右)見下圖蜡饵。在Bootstrap框架中要實現(xiàn)水平表單效果弹渔,必須滿足以下兩個條件:1、在

元素是使用類名“form-horizontal”溯祸。2捞附、配合Bootstrap框架的網(wǎng)格系統(tǒng)巾乳。(網(wǎng)格布局會在以后的章節(jié)中詳細(xì)講解)在元素上使用類名“form-horizontal”主要有以下幾個作用:1您没、設(shè)置表單控件padding和margin值鸟召。2、改變“form-group”的表現(xiàn)形式氨鹏,類似于網(wǎng)格系統(tǒng)的“row”欧募。內(nèi)聯(lián)表單有時候我們需要將表單的控件都在一行內(nèi)顯示,類似這樣的:在Bootstrap框架中實現(xiàn)這樣的表單效果是輕而易舉的仆抵,你只需要在元素中添加類名“form-inline”即可跟继。內(nèi)聯(lián)表單實現(xiàn)原理非常簡單,欲將表單控件在一行顯示镣丑,就需要將表單控件設(shè)置成內(nèi)聯(lián)塊元素(display:inline-block)舔糖。/*源碼請查閱bootstrap.css文件第1928行~第1962行*/如果你要在input前面添加一個label標(biāo)簽時,會導(dǎo)致input換行顯示莺匠。如果你必須添加這樣的一個label標(biāo)簽金吗,并且不想讓input換行,你需要將label標(biāo)簽也放在容器“form-group”中趣竣,如:

郵箱

密碼

記住密碼

進(jìn)入郵箱

庫引用地址:? bootstrap框架: //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css? jquery庫: http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js? bootstrap.min.js:http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js? 柵格系統(tǒng)? bootstrap中的組件和css樣式bootstrap插件javascript

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末摇庙,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子遥缕,更是在濱河造成了極大的恐慌卫袒,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,290評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件单匣,死亡現(xiàn)場離奇詭異夕凝,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)户秤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評論 2 385
  • 文/潘曉璐 我一進(jìn)店門码秉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人虎忌,你說我怎么就攤上這事泡徙。” “怎么了膜蠢?”我有些...
    開封第一講書人閱讀 156,872評論 0 347
  • 文/不壞的土叔 我叫張陵堪藐,是天一觀的道長。 經(jīng)常有香客問我挑围,道長礁竞,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,415評論 1 283
  • 正文 為了忘掉前任杉辙,我火速辦了婚禮模捂,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己狂男,他們只是感情好综看,可當(dāng)我...
    茶點故事閱讀 65,453評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著岖食,像睡著了一般红碑。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上泡垃,一...
    開封第一講書人閱讀 49,784評論 1 290
  • 那天析珊,我揣著相機(jī)與錄音,去河邊找鬼蔑穴。 笑死忠寻,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的存和。 我是一名探鬼主播奕剃,決...
    沈念sama閱讀 38,927評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼哑姚!你這毒婦竟也來了祭饭?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,691評論 0 266
  • 序言:老撾萬榮一對情侶失蹤叙量,失蹤者是張志新(化名)和其女友劉穎倡蝙,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體绞佩,經(jīng)...
    沈念sama閱讀 44,137評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡寺鸥,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,472評論 2 326
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了品山。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片胆建。...
    茶點故事閱讀 38,622評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖肘交,靈堂內(nèi)的尸體忽然破棺而出笆载,到底是詐尸還是另有隱情,我是刑警寧澤涯呻,帶...
    沈念sama閱讀 34,289評論 4 329
  • 正文 年R本政府宣布凉驻,位于F島的核電站,受9級特大地震影響复罐,放射性物質(zhì)發(fā)生泄漏涝登。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,887評論 3 312
  • 文/蒙蒙 一效诅、第九天 我趴在偏房一處隱蔽的房頂上張望胀滚。 院中可真熱鬧趟济,春花似錦、人聲如沸咽笼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽褐荷。三九已至勾效,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間叛甫,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工杨伙, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留其监,地道東北人。 一個月前我還...
    沈念sama閱讀 46,316評論 2 360
  • 正文 我出身青樓限匣,卻偏偏與公主長得像抖苦,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子米死,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,490評論 2 348

推薦閱讀更多精彩內(nèi)容

  • Bootstrap是什么锌历? 一套易用、優(yōu)雅峦筒、靈活究西、可擴(kuò)展的前端工具集--BootStrap。GitHub上介紹 的...
    凜0_0閱讀 10,861評論 3 184
  • 第5章 菜單物喷、按鈕及導(dǎo)航 一卤材、下拉菜單 小伙伴們注意,在Bootstrap框架中的下拉菜單組件是一個獨立的組件峦失,根...
    凜0_0閱讀 4,950評論 0 66
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案扇丛? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,737評論 1 92
  • 最近在減肥,發(fā)現(xiàn)了一件很有趣的事情:我現(xiàn)在吃到過去一半的飯量時就停止進(jìn)食尉辑,其實這個時候肚子已經(jīng)飽了帆精,但慫恿我繼續(xù)動...
    Sifill閱讀 195評論 0 1
  • 本人生性略笨且固執(zhí),也很賦“自以為是”的秉性隧魄。每次初讀一部作品卓练,一般我都不太會仔細(xì)研讀“導(dǎo)讀”“前言”或者“序”這...
    雨兒rain閱讀 408評論 8 2