本人技拙靶擦,還望不吝賜教监徘。
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