Bootstrap學習筆記 常用標籤和類模板

2021-09-20 11:37:05 字數 2957 閱讀 2550

h標籤:bootstrap中的h標籤被改寫了 比原標籤字型要細

我是標題4 h4h4>

我是標題5 h5h5>

我是標題6 h6h6>

類 class=」lead」,這將得到更大更粗、行高更高的文字 一般運用於p標籤

(設定文字為父文字大小的 85%)、>strong>(設定文字為更粗的文字)、 (設定文字為斜體)。

本行內容是在標籤內small>

本行內容是在標籤內strong>

本行內容是在標籤內,並呈現為斜體em>

class="text-left">向左對齊文字p>

class="text-center">居中對齊文字p>

class="text-right">向右對齊文字p>

顯示:

文字顏色:

is muted.

class="text-primary">this text

is important.

class="text-success">this text indicates success.

class="text-info">this text represents some information.

class="text-warning">this text represents a warning.

class="text-danger">this text represents danger.

顯示:

背景顏色:

is important.

class="bg-success">this text indicates success.

class="bg-info">this text represents some information.

class="bg-warning">this text represents a warning.

class="bg-danger">this text represents danger.

顯示:

縮寫功能:

html 元素提供了用於縮寫的標記,比如 www 或 http。bootstrap 定義 元素的樣式為顯示在文字底部的一條虛線邊框,當滑鼠懸停在上面時會顯示完整的文字(只要您為 title 屬性新增了文字)。為了得到乙個更小字型的文字,請新增 .initialism 到 。

title="world wide web">wwwabbr>

title="real ****** syndication"

class="initialism">rssabbr>

顯示:

wwwrss

位址(address)

使用 標籤,您可以在網頁上顯示聯絡資訊。由於 預設為 display:block;,您需要使用

標籤來為封閉的位址文字新增換行。

列表中:

新增類:ul class="list-unstyled" 取消 列表效果  意思就是一行前面  

沒有空格

列表顯示在一行

標題下面的文字顯示在右邊了

blockquote是引用:

是向右對齊的引用

code> 紅色標記一行**我是codecode>

顯示:我是code

highlight
顯示:

highlight

《和》:

《代表< >代表》

顯示:

:多行** 保留空格和換行符大家 好

我是pre

顯示:

大家 好

我是pre

//有滾輪

大家 好

我是pre

顯示:

大家 好 

我是pre

var:

var表示變數:

x=y+1;

顯示:

x=y+1;

:按鍵提示

ctrl + p

顯示:

使用 ctrl + p 來開啟列印視窗。

:顯示電腦列印內容

使用 samp 元素包含電腦輸出的內容:

this text is output from a computer program....

顯示:

使用 samp 元素包含電腦輸出的內容:

this text is output from a computer program….

bootstrap學習筆記

學習 然後對bootstrap進行引用 柵格系統中,列數是12,行數不固定 例項 手機 平板 桌面 在上面案例的基礎上,通過使用針對平板裝置的 col sm 類,我們來建立更加動態和強大的布局吧。col xs 12 col sm 6 col md 8 col xs 6 col md 4 col xs...

bootstrap學習筆記

1 引入的檔案 script script 2 柵格系統布局 bootstrap把頁面設定為12列,通過改變列的數字來進行布局。col xs 4 指小於768px的小裝置 11 col sm 4 指 768px的裝置 22 col md 4 指 992px裝置 33 col lg 4 值1200px...

bootstrap學習筆記

1 bootstrap簡介 1 是乙個前端自適應ui框架 2 由全域性css樣式,元件,js外掛程式組成 基於jquery 2 組成 1 全域性css樣式 1 寫好的一些html標籤的展示效果,可以全域性進行呼叫,標籤通過class屬性來獲採樣式 2 元件 1 寫好的以下可以直接在頁面上展示的元素,...