bootstrap 初次接觸

2021-10-03 04:12:24 字數 4031 閱讀 4265

將要進行布局的內容放在乙個叫row的容器中,預設row中有12個單位。

7col-md-7:網格系統的示例,表示在桌面顯示器上此容器顯示為佔滿row中的7個格仔,row共有12個格仔,如果只寫col則表示自動布局;

row格柵系統

lx超大桌面顯示器,螢幕寬度等於或大於1200px的螢幕; boostrap4中新加入lg大桌面顯示器,螢幕寬度等於或大於992px的螢幕;

md桌面顯示器,螢幕寬度等於或大於768px的螢幕;

sm平板裝置,螢幕寬度等於或大於576px的螢幕;

相較於bootstrap3尺寸有改動

格柵系統偏移操作

container:自適應居中;

push:往左推;

pull:往右拉;

push和pull後邊跟數字,表示往左或者右移動幾個格仔,通過相對定位實現,當超出max-width的寬度時不會換行;offset超出寬度後會換行;

offset:偏移,通過margin-left實現,offset也可以搭配大小使用,比如offset-md-7,在桌面顯示器上往右偏移7個格仔;

文字排版

bootstrap中重新定義了h1~h6的預設樣式

h1(2.5rem=40px);

h2(2rem=32px);

h3(1.75rem=28px);

h4(1.5rem=24px);

h5(1.25rem=20px);

h6(1rem=16px);

display 標籤類display-1 (6rem=96px);

display-2 (5.5rem 88px);

display-3 (4.5rem 72px);

display-4 (3.5rem 56px);

em與rem

em是取之於祖先元素所設定的font-size,預設為16px;

取值優先順序為自身然後從父級往上級找,如果自身元素沒有設定font-size屬性,則會一直往上級元素找,直至找到根元素html標籤,html標籤預設為16px;

em的取值為font-size,margin和padding也會根據取值計算;

rem是直接取值為html根標籤,1rem預設取值為16px;如果對html標籤進行了font-zise值得修改,則會對修改後的值進行取值;

small標籤

一般用於副標題

建立乙個字型大小更小顏色更前淺的文字

字型為祖先元素font-size值得80%;字型粗細為font-sidth:400;

mark標籤

擁有淡黃色背景色,有一定內邊距,內聯元素;

內邊距為0.2em

背景顏色 #fcf8e3;

abbr標籤

在bootstrap4中abbr標記預設設定為元素底部一條虛線;

滑鼠為 cursor:help;

blockquote標籤

引用文字,給blockquote標籤新增blockquote類;

1.font-size為1.25rem,margin-bottom為1rem;

dl標籤

bootstrap4中重新定義了dl&dt的樣式

將dt進行了文字加粗處理

code標籤

可以將一些**放在code標籤內,使用了word-break屬性;

字型大小為87.5%,字型顏色為#e83e8c

word-break在半形空格和連字元處換行;

kbd標籤

黑色背景白色文字,有少許圓角

padding值上下為0.2rem左右為0.4rem;

font-size為87.5%;

color為#fff

背景顏色為test

border-radius:為0.2rem;

pre標籤

bootstrap4中定義了pre標籤的樣式

font-size為87.5%;

display:block;

color:#212529;

文字排版類檔案

font-size-blod 加粗文字;

font-size-normal 普通文字;

font-size-light 更細的文字;

font-italic 傾斜的文字;

lead 讓段落更突出;font-size:1.25rem font-width:300;

small 父級元素文字的85%;

text-left:左對齊;

text-center 文字居中對齊;

text-right 右對齊;

text-justify 設定文字對齊,段落中超出螢幕部分文字自動換行;

text-nowrap 段落超出螢幕高度不換行;

text-lowercase 將文字設定為小寫;

text-uppercase 將文字設定為大寫;

text-capitalize 單子首字母大寫;

initialism 將在abbr標籤的內容以小字顯示並轉換成大寫;

list-unstyled bootstrap4中重新定義的ul和ol的樣式;

list-inline 將列表放在一行內;在ul中新增list-inline在li標籤中新增list-inline-item

pre-scrollable 在pre標籤中文字高度超出340px時,會在y軸出現滾動條; 顏色

顏色類

bootstrap4中提供的一些字型顏色類;

tetx-muted 柔和的文字;灰色

text-primary 重要的文字;藍色

text-success 執行成功的文字;綠色

text-info 資訊文字鏈結; 孔雀藍

text-warning 警告的文字鏈結; 橙色

text-danger 危險的文字鏈結; 紅色

text-secondary 副標題文字鏈結; 灰色

text-dark 深灰色的鏈結;深灰色

text-linght 淺灰色的文字;淺灰色

text-write 純白色的文字;白色

背景類

bootstrap4中提供的一些背景顏色類;

bg-primary 重要的背景顏色;藍色

bg-success 執行成功的文字;綠色

bg-info 資訊提示背景顏色;孔雀藍

bg-warning 警告提示的背景顏色;黃色

bg-danger 危險提示的背景顏色;紅色

bg-secondary 副標題背景顏色;灰色

bg-dark 深灰色標題;深灰色

bg-light 淺灰色標題;淺灰色

bootstrap4中提供的一些樣式類;

rounded 圓角

rounded-circle 橢圓

img-thumbnail 縮圖;有邊框

jumbotron只是乙個背景框

在元素中新增.jumbotron類名來呼叫背景框;

淺灰色背景略帶圓角;

資訊提示框類名

在元素中首先加入alert類

alert-success 成功的提示資訊 淺綠色

alert-info 請注意的資訊 淺藍色

alert-warning 警告的資訊 淺黃色

alert-danger 錯誤的資訊 淺紅色

alert-primary 重要資訊 蘭色

alert-secondary 次要的資訊 淺灰色

alert-dark 深灰色的資訊 深灰色

初次接觸perl

今天貝在煩乙個程式,也為難他了,剛學perl不到兩天,就讓他寫程式完成功能,雖然現在他有很大的提高,但是也還是心裡沒底啊。第一次布置的任務,他說如果不完成還是挺不好的,呵呵,沒辦法,我就樂於助人,趕緊看了看perl的大概語法,變數迴圈等,然後找了相關的網頁看了看,還好,因為比較熟悉c語言,而且上過s...

初次接觸powershell

在linux下接觸shell後,發現shell的功能是如此的強大!window呢?同樣,學習了 nix的做法,實現了shell,稱為powershell,在我看來,這個名字取得不過份,它通過。net與shell的結合,提供了強大的平台操作功能,提供了與 nix的相同的命令的語法,令 nix的程式設計...

初次接觸VBS

隨便找了段vbs程式,分析語句on error resume next 使程式按照產生錯誤的語句之後的語句繼續執行,具體見 dim sourcepath dim numb dim應該是定義變數吧,猜得set初始化變數 sub filew 寫檔案 dim fso,myfile set fso crea...