將要進行布局的內容放在乙個叫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...