Bootstrap基礎(chǔ)教程（第3版）（微課版）課件 第三章 CSS布局_第1頁(yè)
Bootstrap基礎(chǔ)教程（第3版）（微課版）課件 第三章 CSS布局_第2頁(yè)
Bootstrap基礎(chǔ)教程（第3版）（微課版）課件 第三章 CSS布局_第3頁(yè)
Bootstrap基礎(chǔ)教程（第3版）（微課版）課件 第三章 CSS布局_第4頁(yè)
Bootstrap基礎(chǔ)教程（第3版）（微課版）課件 第三章 CSS布局_第5頁(yè)
已閱讀5頁(yè)，還剩82頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第3章CSS布局Bootstrap基礎(chǔ)教程（第3版）（微課版）趙丙秀目錄CONTENTS678910按鈕表格圖像圖文框案例12345排版顏色類文本類列表超鏈接課程導(dǎo)入排版主要是使用CSS對(duì)HTML元素進(jìn)行樣式設(shè)置及布局定位，排版在前端開(kāi)發(fā)中的重要性不言而喻。Bootstrap提供了一套CSS樣式，可以方便快速地幫助我們渲染修飾HTML元素，讓頁(yè)面排版變得更簡(jiǎn)單。1排版排版排版在Bootstrap5中，元素使用rem尺寸單位。它根據(jù)節(jié)點(diǎn)<html>的字體大小進(jìn)行計(jì)算。通常瀏覽器默認(rèn)為16px。1rem為16px，2rem為32px。我們也可以通過(guò)變量$font-size-root來(lái)修改瀏覽器默認(rèn)值。標(biāo)題1．<h1>-<h6>標(biāo)簽Bootstrap5重新定義了<h1>到<h6>標(biāo)題標(biāo)簽的樣式標(biāo)題1．<h1>-<h6>標(biāo)簽當(dāng)設(shè)備寬度>=1200px時(shí)，標(biāo)題字號(hào)為固定值，<1200px時(shí)，標(biāo)題字號(hào)與視口寬度有關(guān)。標(biāo)題1．<h1>-<h6>標(biāo)簽標(biāo)題2.類.h1-.h6.h1到.h6六個(gè)樣式類，使用它們可以給內(nèi)聯(lián)屬性的文本賦予不同級(jí)別標(biāo)題的樣式。標(biāo)題3.副標(biāo)題當(dāng)一個(gè)標(biāo)題內(nèi)含有副標(biāo)題時(shí)，可以在該標(biāo)題內(nèi)嵌套添加<small>元素或者給小標(biāo)題元素應(yīng)用樣式類.small，這樣可以得到一個(gè)字號(hào)更小的文本，即副標(biāo)題。通常，在與.text-body-secondary類一起使用時(shí)，將副標(biāo)題的顏色變淺。標(biāo)題4.Display標(biāo)題

.display1~.display6可以得到更大的font-size樣式。字號(hào)的大小與視口寬度相關(guān)，當(dāng)視口寬度大于或等于1200px時(shí)，字號(hào)大小分別為：5rem、4.5rem、4rem、3.5rem、3rem、2.5rem。段落Bootstrap將頁(yè)面的全局字體大小font-size設(shè)置為16px，行高line-height設(shè)置為1.5。<body>元素及段落<p>元素都被賦予了這些屬性。另外，<p>元素還margin-top：0，margin-bottom：1rem（16px）基本段落在多個(gè)段落中，為了突出顯示某一個(gè)段落作為強(qiáng)調(diào)的中心內(nèi)容或引導(dǎo)主體內(nèi)容，可以給該段落應(yīng)用樣式類.lead。這樣可以得到更大更粗、行高更高的段落文本，但是有些瀏覽器不支持這一類。中心內(nèi)容段落實(shí)例展示文本內(nèi)聯(lián)標(biāo)簽

Bootstrap對(duì)常用的Html5內(nèi)聯(lián)標(biāo)簽的樣式進(jìn)行了重新定義，對(duì)文本進(jìn)行強(qiáng)化以突顯重要內(nèi)容，從而實(shí)現(xiàn)風(fēng)格統(tǒng)一、布局美觀的效果。標(biāo)簽描述標(biāo)簽描述<b><strong>文本加粗<mark>高亮文本<del><s>刪除線<em><i>斜體<ins><u>下劃線<small>小號(hào)文本，父元素字體的87.5%文本內(nèi)聯(lián)標(biāo)簽實(shí)例展示水平線hr和垂直線vr

<hr>元素已被簡(jiǎn)化。與瀏覽器默認(rèn)設(shè)置類似，＜hr＞通過(guò)邊框頂部設(shè)置樣式，具有默認(rèn)的透明度：0.25，并通過(guò)顏色自動(dòng)繼承其邊框顏色，包括通過(guò)父項(xiàng)設(shè)置顏色時(shí)。它們可以使用文本、邊框和透明度工具類進(jìn)行修改。水平線水平線hr和垂直線vrhr實(shí)例展示水平線hr和垂直線vr

Bootstrap5中專門定義垂直線工具類.vr，以下代碼為.vr的樣式定義。同樣可以使用文本、邊框、透明度等工具類進(jìn)行定制水平線。垂直線

.vr{display:inline-block;align-self:stretch;width:var(--bs-border-width);min-height:1em;background-color:currentcolor;opacity:0.25;}水平線hr和垂直線vrvr實(shí)例展示代碼01<code>：包裹內(nèi)聯(lián)樣式的代碼片段。02<kbd>：標(biāo)記用戶通過(guò)鍵盤輸入的內(nèi)容。03<pre>：顯示多行代碼，需要注意將尖括號(hào)做轉(zhuǎn)義處理。04<var>：標(biāo)記變量。05<samp>：標(biāo)記程序輸出的內(nèi)容。代碼實(shí)例展示縮略語(yǔ)<abbr>標(biāo)簽用于縮略語(yǔ)，<abbr>元素的樣式為帶有較淺的虛線下邊框，當(dāng)鼠標(biāo)懸停在上面時(shí)會(huì)變成帶有“問(wèn)號(hào)”的指針，同時(shí)會(huì)顯示出完整的文本（必須為<abbr>的title屬性添加了文本）。在abbr上使用.initialism，可以讓字號(hào)略小一點(diǎn)，如有英文字母會(huì)變?yōu)榇髮?。地址使?lt;address>標(biāo)簽可以在網(wǎng)頁(yè)上顯示聯(lián)系信息。Bootstrap重置了＜address＞的樣式，以將瀏覽器默認(rèn)字體樣式從斜體重置為普通。行高繼承，并添加了margin-bottom:1rem。在該元素內(nèi)，每行信息的結(jié)尾使用<br>來(lái)保留樣式。引用將任何HTML元素包裹在<blockquoteclass="blockquote">中即可表現(xiàn)為引用樣式。默認(rèn)樣式的引用引用當(dāng)需要提供引用來(lái)源時(shí)，將<blockquote>放在<figure>中，并使用<figcaptionclass="blockquote-footer">標(biāo)簽放置來(lái)源信息。這里figcaption元素可以換為任意塊級(jí)元素。另外，請(qǐng)確保將來(lái)源作品的名稱放在＜cite＞元素中獲得斜體樣式。引用中添加其他選項(xiàng)引用引用默認(rèn)左對(duì)齊，在<figure>上應(yīng)用text-end或text-center，可以將應(yīng)用右對(duì)齊或居中。引用中添加其他選項(xiàng)2顏色類顏色類文本顏色該顏色值在手風(fēng)琴、列表組等組件中往往為活動(dòng)狀態(tài)時(shí)的背景色。不推薦顏色類文本透明度顏色類背景顏色顏色類背景透明度顏色類淺色背景顏色類漸變背景顏色類文本背景顏色3文本類文本類Bootstrap提供了.text-start、.text-end、.text-center、.text-X-*(其中X為屏幕寬度前綴sm、md、lg、xl、xxl，*為start、end、center)。文本排列文本類文本轉(zhuǎn)換文本類字號(hào)文本類字重、樣式文本類實(shí)例展示文本類行高文本類行高實(shí)例展示其他類類名描述類名描述.text-monospace等寬字體.text-truncate內(nèi)容裁剪.text-nowrap不換行.text-break單詞換行.text-wrap換行.text-decoration-{none|underline|line-through}無(wú)下劃線、下劃線、過(guò)文本的線其他類行高實(shí)例展示4列表列表列表標(biāo)記的使用與html5的是一樣的。bootstrap5同樣的對(duì)列表的樣式進(jìn)行了重置。ol、ul設(shè)置了左邊內(nèi)邊距2rem，去掉頂部外邊距，添加底部外邊距1rem。嵌套的時(shí)候，嵌套列表的底部外邊距為0。類的定義.list-unstyle:可以移除默認(rèn)的list-style樣式。.list-inline:實(shí)現(xiàn)內(nèi)聯(lián)列表。list-inline應(yīng)用在ul或ol上，.list-inline-item應(yīng)用在li上。列表行高實(shí)例展示列表行高實(shí)例展示列表行高實(shí)例展示列表行高描述列表<dl>

<dt>廚余垃圾</dt>

<dd>含有極高的水分與有機(jī)物，很容易腐壞，產(chǎn)生惡臭。經(jīng)過(guò)妥......</dd><dt>有害垃圾</dt><dd>對(duì)人體健康或者自然環(huán)境造成直接或者潛在危害生活的廢棄物......</dd>

......</dl>列表使用柵格系統(tǒng)水平排列，使用.text-truncate來(lái)截?cái)辔淖?。行高描述列?水平排列5超鏈接鏈接類名描述.link-color鏈接顏色，color的取值為8種主題色加一個(gè)body強(qiáng)調(diào)色。與文本顏色.text-*不同，這些類具有:hover、:focus狀態(tài).link-underline-color下劃線顏色，color的取值為8個(gè)主題色.link-opacity-value鏈接顏色的透明度。value取值：10、25、50、75、100，值越小越透明.link-opacity-value-hover懸停時(shí)鏈接的透明度.link-offset-value設(shè)置下劃線與文本的距離，value的取值：1、2、3.link-offset-value-hover懸停時(shí)下劃線與文本的距離.link-underline-opacity-value下劃線的顏色透明度，value的取值：0、10、25、50、75、100.link-underline-opacity-value-hover懸停時(shí)下劃線的透明度鏈接行高實(shí)例展示6按鈕按鈕預(yù)定義按鈕Bootstrap為按鈕提供了一個(gè)基本樣式類.btn，所有按鈕元素都使用它。此外，還提供了一些預(yù)定義樣式類.btn-{color}，可以用來(lái)定義不同風(fēng)格的按鈕，其中color的取值：primary、secondary、success、danger、warning、info、light、dark、link。按鈕按鈕邊框如果需要一個(gè)按鈕，但不需要很深的背景顏色，則可以使用.btn-outline-*類來(lái)代替btn-*，其中*的取值為：primary、secondary、success、danger、warning、info、light、dark。btn-outline-*類中定義了按鈕的邊框、淺色背景、按鈕文字的顏色、鼠標(biāo)滑過(guò)的效果、獲得焦點(diǎn)的效果等。按鈕按鈕標(biāo)簽

btn和.btn-*除了可以應(yīng)用在<button>元素上外，還可以用在

<a>、

<input>

元素上，同樣可以得到對(duì)應(yīng)的按鈕效果。按鈕按鈕狀態(tài)、尺寸按鈕狀態(tài).active激活狀態(tài).disabled禁用狀態(tài)按鈕尺寸.btn-lg大號(hào)按鈕.btn-sm小號(hào)按鈕按鈕塊級(jí)按鈕在Bootstsrap4中，有一個(gè)類btn-block，可以將按鈕拉伸至其父元素寬度的100%，稱為塊級(jí)按鈕。Bootstsrap5中沒(méi)有這個(gè)類了。塊級(jí)按鈕的實(shí)現(xiàn)借助display、gap工具類來(lái)實(shí)現(xiàn)。他比之前更加靈活。按鈕塊級(jí)按鈕7表格類名描述.table基類，這是表格的基本樣式.table-striped數(shù)據(jù)表的行條紋狀顯示.table-striped-columns數(shù)據(jù)表的列條紋狀顯示.table-bordered表格邊框、可以配合邊框工具改變顏色.table-borderless表格無(wú)邊框.table-hover懸停效果.table-sm緊縮型表格表格表格樣式表格表格樣式表格類名描述.table-primary藍(lán)色:指定這是一個(gè)重要的操作.table-success綠色:指定這是一個(gè)允許執(zhí)行的操作.table-danger紅色:指定這是可以危險(xiǎn)的操作.table-info淺藍(lán)色:表示內(nèi)容已變更.table-warning橘色:表示需要注意的操作.table-secondary灰色:表示內(nèi)容不怎么重要.table-light淺灰色，可以是表格行的背景.table-dark深灰色，可以是表格行的背景主題顏色類可以用在table的各級(jí)元素上，如table、tr、td、thead、tbody、tfooter用來(lái)改變其背景顏色。應(yīng)用了主題色后，前面的條紋色、懸停時(shí)的顏色、都會(huì)相應(yīng)的跟著主題色進(jìn)行變化。表格顏色類表格響應(yīng)式表格類名描述.table-responsive溢出時(shí)出現(xiàn)底部滾動(dòng)條.table-responsive-**取值sm、md、lg、xl、xxl，當(dāng)小于對(duì)應(yīng)寬度時(shí)，溢出會(huì)出現(xiàn)底部滾動(dòng)條表格類名描述.table-group-divider表格分組直接的分割線.caption-top將表格標(biāo)題移到表格上面.table-active高亮色:用于鼠標(biāo)懸停效果，不同的主題的表格高亮不一樣其他類表格個(gè)性化表格在<link>語(yǔ)句的后面添加<style>樣式重置了.table-striped、.table-hover、.table-group-divider類的定義。8圖像圖像通過(guò)給圖片<img>元素應(yīng)用樣式類.img-fluid或者定義max-width:100%、height：auto樣式，可以讓圖片支持響應(yīng)式布局。從而讓圖片在隨著其父元素大小同步縮放。<imgsrc="img/pic.jpg"class="img-fluid"alt="響應(yīng)式圖像"/>響應(yīng)式圖像通過(guò)給圖像<img>元素應(yīng)用.img-thumnail樣式類，來(lái)使圖片自動(dòng)被加上一個(gè)帶圓角且1px邊界的外框縮略圖樣式。使用邊框工具中的.rounded-*類，來(lái)設(shè)置圖片的邊框樣式。圖像圖像邊框?qū)τ?block屬性的塊狀圖片，我們也可以使用浮動(dòng)或文字對(duì)齊，來(lái)實(shí)現(xiàn)對(duì)圖像的對(duì)齊、浮動(dòng)控制，可以使用

.mx-auto

的進(jìn)行居中。圖像圖像對(duì)齊

<picture>

元素，它可以為

<img>指定多個(gè)<source>

。利用<picture>元素可實(shí)現(xiàn)<img>在不同屏幕下顯示不同的圖片。圖片樣式

.img-*

類需添加到

<img>

元素而不是

<picture>

元素上。圖像picture元素圖文框如果我們需要顯示的內(nèi)容區(qū)包括了一個(gè)圖片和一個(gè)可選的標(biāo)題，可使用.figure、.figure-*相關(guān)的樣式。將.figure類、.figure-caption類、.figure-img類分別應(yīng)用在<figure>、<figcaption>、<img>元素上，可以得到一個(gè)圖文組件。注意需要對(duì)img使用.img-fluid。10少兒編程頁(yè)面課程導(dǎo)入少兒編程頁(yè)面類似巨幕效果按鈕圖片標(biāo)題代碼相關(guān)的標(biāo)簽使用了圖標(biāo)、列表、引用、按鈕、大小寫轉(zhuǎn)換等元素和相關(guān)類使用了表格、塊級(jí)按鈕頁(yè)腳部分，使用了圖片、內(nèi)聯(lián)列表、地址具體實(shí)現(xiàn)

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論