《Web前端框架應(yīng)用bootstrap》課件-項(xiàng)目三 基礎(chǔ)樣式_第1頁
《Web前端框架應(yīng)用bootstrap》課件-項(xiàng)目三 基礎(chǔ)樣式_第2頁
《Web前端框架應(yīng)用bootstrap》課件-項(xiàng)目三 基礎(chǔ)樣式_第3頁
《Web前端框架應(yīng)用bootstrap》課件-項(xiàng)目三 基礎(chǔ)樣式_第4頁
《Web前端框架應(yīng)用bootstrap》課件-項(xiàng)目三 基礎(chǔ)樣式_第5頁
已閱讀5頁，還剩114頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

任務(wù)1：基礎(chǔ)樣式簡介、標(biāo)題項(xiàng)目三基礎(chǔ)樣式主講人：CONTENTS010203概述標(biāo)題段落04文本內(nèi)聯(lián)標(biāo)簽課程導(dǎo)入排版主要是使用CSS對HTML元素進(jìn)行樣式設(shè)置及布局定位，排版在前端開發(fā)中的重要性不言而喻。Bootstrap提供了一套CSS樣式，可以方便快速地幫助我們渲染修飾HTML元素，讓頁面排版變得更簡單。概述/01概述概述在Bootstrap5中，元素使用rem尺寸單位。它根據(jù)節(jié)點(diǎn)<html>的字體大小進(jìn)行計(jì)算。通常瀏覽器默認(rèn)為16px。1rem為16px，2rem為32px。我們也可以通過變量$font-size-root來修改瀏覽器默認(rèn)值。標(biāo)題/02標(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時，標(biāo)題字號為固定值，<1200px時，標(biāo)題字號與視口寬度有關(guān)。標(biāo)題1．<h1>-<h6>標(biāo)簽標(biāo)題2.類.h1-.h6.h1到.h6六個樣式類，使用它們可以給內(nèi)聯(lián)屬性的文本賦予不同級別標(biāo)題的樣式。標(biāo)題3.副標(biāo)題當(dāng)一個標(biāo)題內(nèi)含有副標(biāo)題時，可以在該標(biāo)題內(nèi)嵌套添加<small>元素或者給小標(biāo)題元素應(yīng)用樣式類.small，這樣可以得到一個字號更小的文本，即副標(biāo)題。通常，在與.text-body-secondary類一起使用時，將副標(biāo)題的顏色變淺。標(biāo)題4.Display標(biāo)題

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

Bootstrap對常用的Html5內(nèi)聯(lián)標(biāo)簽的樣式進(jìn)行了重新定義，對文本進(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>小號文本，父元素字體的87.5%任務(wù)2：基礎(chǔ)標(biāo)簽：hr、內(nèi)聯(lián)文本標(biāo)簽、縮略語、地址項(xiàng)目三基礎(chǔ)樣式主講人：CONTENTS010203水平線hrcode縮略語04地址05引用水平線hr/01水平線hr

<hr>元素已被簡化。與瀏覽器默認(rèn)設(shè)置類似，＜hr＞通過邊框頂部設(shè)置樣式，具有默認(rèn)的透明度：0.25，并通過顏色自動繼承其邊框顏色，包括通過父項(xiàng)設(shè)置顏色時。它們可以使用文本、邊框和透明度工具類進(jìn)行修改。水平線hrcode/02code01<code>：包裹內(nèi)聯(lián)樣式的代碼片段。02<kbd>：標(biāo)記用戶通過鍵盤輸入的內(nèi)容。03<pre>：顯示多行代碼，需要注意將尖括號做轉(zhuǎn)義處理。04<var>：標(biāo)記變量。05<samp>：標(biāo)記程序輸出的內(nèi)容。code縮略語/03縮略語<abbr>標(biāo)簽用于縮略語，<abbr>元素的樣式為帶有較淺的虛線下邊框，當(dāng)鼠標(biāo)懸停在上面時會變成帶有“問號”的指針，同時會顯示出完整的文本（必須為<abbr>的title屬性添加了文本）。在abbr上使用.initialism，可以讓字號略小一點(diǎn)，如有英文字母會變?yōu)榇髮?。地?04地址使用<address>標(biāo)簽可以在網(wǎng)頁上顯示聯(lián)系信息。Bootstrap重置了＜address＞的樣式，以將瀏覽器默認(rèn)字體樣式從斜體重置為普通。行高繼承，并添加了margin-bottom:1rem。在該元素內(nèi)，每行信息的結(jié)尾使用<br>來保留樣式。引用/05引用將任何HTML元素包裹在<blockquoteclass="blockquote">中即可表現(xiàn)為引用樣式。引用當(dāng)需要提供引用來源時，將<blockquote>放在<figure>中，并使用<figcaptionclass="blockquote-footer">標(biāo)簽放置來源信息。這里figcaption元素可以換為任意塊級元素。另外，請確保將來源作品的名稱放在＜cite＞元素中獲得斜體樣式。引用引用默認(rèn)左對齊，在<figure>上應(yīng)用text-end或text-center，可以將應(yīng)用右對齊或居中。居中右對齊任務(wù)3：

文本、背景顏色項(xiàng)目三基礎(chǔ)樣式主講人：CONTENTS0102文本顏色背景顏色03透明度文本顏色/01文本顏色文本顏色文本顏色該顏色值在手風(fēng)琴、列表組等組件中往往為活動狀態(tài)時的背景色。文本顏色文本顏色不推薦文本顏色文本顏色透明度背景顏色/02背景顏色背景顏色背景顏色背景顏色漸變背景背景顏色文本背景顏色透明度/03透明度任務(wù)4：

文本類項(xiàng)目三基礎(chǔ)樣式主講人：CONTENTS0102文本排列字號、字重、樣式、行高03文本修飾、文本轉(zhuǎn)換04其他類文本排列/01文本排列Bootstrap提供了.text-start、.text-end、.text-center、.text-X-*(其中X為屏幕寬度前綴sm、md、lg、xl、xxl，*為start、end、center)。字號、字重、樣式、行高/02字號、字重、樣式、行高字號字號、字重、樣式、行高字重、樣式字號、字重、樣式、行高行高字號、字重、樣式、行高行高字號、字重、樣式、行高行高文本修飾、

文本轉(zhuǎn)換/03文本修飾、文本轉(zhuǎn)換文本修飾文本修飾、文本轉(zhuǎn)換文本轉(zhuǎn)換其他類/04其他類類名描述類名描述.text-monospace等寬字體.text-truncate內(nèi)容裁剪.text-nowrap不換行.text-break單詞換行.text-wrap換行其他類任務(wù)5：

列表、按鈕項(xiàng)目三基礎(chǔ)樣式主講人：CONTENTS0102列表鏈接03按鈕列表/01列表列表標(biāo)記的使用與html5的是一樣的。bootstrap5同樣的對列表的樣式進(jìn)行了重置。ol、ul設(shè)置了左邊內(nèi)邊距2rem，去掉頂部外邊距，添加底部外邊距1rem。嵌套的時候，嵌套列表的底部外邊距為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上。列表使用柵格系統(tǒng)水平排列，使用.text-truncate來截?cái)辔淖?。鏈?02鏈接類名描述.link-color鏈接顏色，color的取值為8種主題色加一個body強(qiáng)調(diào)色。與文本顏色.text-*不同，這些類具有:hover、:focus狀態(tài).link-underline-color下劃線顏色，color的取值為8個主題色.link-opacity-value鏈接顏色的透明度。value取值：10、25、50、75、100，值越小越透明.link-opacity-value-hover懸停時鏈接的透明度.link-offset-value設(shè)置下劃線與文本的距離，value的取值：1、2、3.link-offset-value-hover懸停時下劃線與文本的距離.link-underline-opacity-value下劃線的顏色透明度，value的取值：0、10、25、50、75、100.link-underline-opacity-value-hover懸停時下劃線的透明度按鈕/03按鈕預(yù)定義按鈕Bootstrap為按鈕提供了一個基本樣式類.btn，所有按鈕元素都使用它。此外，還提供了一些預(yù)定義樣式類.btn-{color}，可以用來定義不同風(fēng)格的按鈕，其中color的取值：primary、secondary、success、danger、warning、info、light、dark、link。按鈕按鈕邊框如果需要一個按鈕，但不需要很深的背景顏色，則可以使用.btn-outline-*類來代替btn-*，其中*的取值為：primary、secondary、success、danger、warning、info、light、dark。btn-outline-*類中定義了按鈕的邊框、淺色背景、按鈕文字的顏色、鼠標(biāo)滑過的效果、獲得焦點(diǎn)的效果等。按鈕按鈕標(biāo)簽

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

<a>、

<input>

元素上，同樣可以得到對應(yīng)的按鈕效果。按鈕按鈕按鈕狀態(tài).active激活狀態(tài).disabled禁用狀態(tài)按鈕尺寸.btn-lg大號按鈕.btn-sm小號按鈕按鈕塊級按鈕在Bootstsrap4中，有一個類btn-block，可以將按鈕拉伸至其父元素寬度的100%，稱為塊級按鈕。Bootstsrap5中沒有這個類了。塊級按鈕的實(shí)現(xiàn)借助display、gap工具類來實(shí)現(xiàn)。他比之前更加靈活。按鈕塊級按鈕課程小結(jié)

列表鏈接按鈕任務(wù)6：

表格項(xiàng)目三基礎(chǔ)樣式主講人：CONTENTS0102表格樣式類表格主題顏色類03其他類表格樣式類/01表格樣式類類名描述.table基類，這是表格的基本樣式.table-striped數(shù)據(jù)表的行條紋狀顯示.table-striped-columns數(shù)據(jù)表的列條紋狀顯示.table-bordered表格邊框、可以配合邊框工具改變顏色.table-borderless表格無邊框.table-hover懸停效果.table-sm緊縮型表格表格主題顏色類/02表格主題顏色類類名描述.table-primary藍(lán)色:指定這是一個重要的操作.table-success綠色:指定這是一個允許執(zhí)行的操作.table-danger紅色:指定這是可以危險的操作.table-info淺藍(lán)色:表示內(nèi)容已變更.table-warning橘色:表示需要注意的操作.table-secondary灰色:表示內(nèi)容不怎么重要.table-light淺灰色，可以是表格行的背景.table-dark深灰色，可以是表格行的背景主題顏色類可以用在table的各級元素上，如table、tr、td、thead、tbody、tfooter用來改變其背景顏色。應(yīng)用了主題色后，前面的條紋色、懸停時的顏色、都會相應(yīng)的跟著主題色進(jìn)行變化。表格主題顏色類響應(yīng)式表格類名描述.table-responsive溢出時出現(xiàn)底部滾動條.table-responsive-**取值sm、md、lg、xl、xxl，當(dāng)小于對應(yīng)寬度時，溢出會出現(xiàn)底部滾動條其他類/03其他類類名描述.table-group-divider表格分組直接的分割線.caption-top將表格標(biāo)題移到表格上面.table-active高亮色:用于鼠標(biāo)懸停效果，不同的主題的表格高亮不一樣其他類水平對齊垂直對齊text-startalign-toptext-centeralign-middletext-endalign-bottomalign-baselinealign-text-topalign-text-bottom課程小結(jié)使用bootstrap框架可以快速制作出比較美觀的表格。任務(wù)7：

圖像、圖文框項(xiàng)目三基礎(chǔ)樣式主講人：CONTENTS0102圖片樣式類圖像對齊0304picture元素圖文框圖片樣式類/01圖片樣式類通過給圖片<img>元素應(yīng)用樣式類.img-fluid或者定義max-width:100%、height：auto樣式，可以讓圖片支持響應(yīng)式布局。從而讓圖片在隨著其父元素大小同步縮放。<imgsrc="img/pic.jpg"class="img-fluid"alt="響應(yīng)式圖像"/>圖片樣式類通過給圖像<img>元素應(yīng)用.img-thumnail樣式類，來使圖片自動被加上一個帶圓角且1px邊界的外框縮略圖樣式。使用邊框工具中的.rounded-*類，來設(shè)置圖片的邊框樣式。圖像對齊/02圖像對齊對于.block屬性的塊狀圖片，我們也可以使用浮動或文字對齊，來實(shí)現(xiàn)對圖像的對齊、浮動控制，可以使用

.mx-auto

的進(jìn)行居中。picture元素/03picture元素

<picture>

元素，它可以為

<img>指定多個<source>

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

.img-*

類需添加到

<img>

元素而不是

<picture>

元素上。圖文框/04圖文框如果我們需要顯示的內(nèi)容區(qū)包括了一個圖片和一個可選的標(biāo)題，可使用.figure、.figure-*相關(guān)的樣式。將.figure類、.figure-caption類、.figure-img類分別應(yīng)用在<figure>、<figcaption>、<img>元素上，可以得到一個圖文組件。注意需要對img使用.img-fluid。課程小結(jié)

圖片樣式類

picture元素

圖像對齊

圖文框案例：少兒編程項(xiàng)目三基礎(chǔ)樣式主講人：余璐CONTENTS0102少兒編程頁面具體實(shí)現(xiàn)課程導(dǎo)入排版文本列表按鈕表格課程導(dǎo)入少兒編程頁面/01少兒編程頁面類似巨幕效果按鈕圖片標(biāo)題代碼相關(guān)的標(biāo)簽使用了圖標(biāo)、列表、引用、按鈕、大小寫轉(zhuǎn)換等元素和相關(guān)類使用了表格、塊級按鈕頁腳部分，使用了圖片、內(nèi)聯(lián)列表、地址具體實(shí)現(xiàn)/02具體實(shí)現(xiàn)

溫馨提示

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

評論

0/150

提交評論