BootStrap_01之全局样式
1、響應式網頁：
?①Responsive Web Page：一個可以根據瀏覽設備的不同，而自動更改布局、圖片、文字效果的網頁；
?②構成：不能固定寬度，必須流式布局；文字和圖片大小隨容器大小而改變；CSS3 Media Query；
2、響應式網頁編寫：
?①必須聲明viewport元標簽：
??<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
??* 避免用戶左右滑動屏幕，禁止瀏覽器初始時縮放顯示；
?②容器的寬度盡量不使用固定值（px），使用相對寬度（%或auto）；
?③文字盡量不使用絕對尺寸（px），使用相對尺寸（em或rem）；
?④圖片要指定大小，如：
??img{
???max-width:100%;/*隨容器縮小，但最大不會超過圖片原始大小——防止失真*/
??}
?⑤頁面布局時不能固定，采用流式布局，如浮動，inline-block；
?⑥靈活使用CSS3 Media Query技術——響應式網頁必備元素！
3、CSS3 Media Query技術：
?①Media：指瀏覽網頁的設備，如screen、tv、projection、tty（字符終端）、print、braille、speech等；
?②Query：指自動獲取當前瀏覽設備物理特性，如色彩深度、orientation、width、height等；
?③CSS媒體查詢技術：可以根據瀏覽設備的類型及特性，執行不同的CSS代碼；
?④CSS3 Media Query兩種用法：
??a、根據媒體查詢結果，執行不同的外部CSS文件：
???<link media="screen and (max-width:991px) and (min-width:768px)" rel="stylesheet" href="css/pad.css"/>
???不足：當前設備不執行的CSS文件也會被瀏覽器加載，每個CSS文件可能存在很多重復代碼；
??b、在一個CSS片段中，有選擇的執行某些選擇器：
???@media screen and (min-width:768px) and (max-width:991px){
????選擇器{屬性名：值}
???}
4、BootStrap模板：
?①<html lang="zh-cn">
??HTML標簽的lang屬性（language），用于指定當前網頁的自然語言（可取值zh-cn、en、en-us、ja等）；
??作用：為瀏覽器翻譯功能指明原始語言；為屏幕閱讀軟件指明應該使用的發音；
?②<meta http-equiv="X-UA-Compatible" content="IE=dege">
??HTTP響應消息頭部：X-UA-Compatible；
??Cross-UserAgent-Compatible：IE瀏覽器專用頭部，告訴新版本的IE兼容哪個版本的內核，edge表示啟用能夠使用的最新的版本內核；
5、BootStrap全局CSS樣式：
?①按鈕相關Class：
??.btn——按鈕基礎樣式；
??.btn-default——白底黑字按鈕；
??.btn-danger——紅色按鈕；
??.btn-warning——黃色按鈕；
??.btn-success——綠色按鈕；
??.btn-info——淺藍色按鈕；
??.btn-primary——深藍色按鈕；
??.btn-lg——大號按鈕；
??.btn-sm——中號按鈕；
??.btn-xs——小號按鈕；
??.btn-block——塊級按鈕；
?②圖片相關Class：
??.img-circle——圓形圖片；
??.img-rounded——圓角圖片；
??.img-thumbnail——縮略圖片；
??.img-responsive——響應式圖片；
?③文本相關Class：
??.text-danger/warning/success/info/primary——五種文本顏色；
??.bg-danger/warning/success/info/primary——五種文本背景顏色；
??.text-uppercase——文本轉換為大寫形式；
??.text-lowercase——文本轉換為小寫形式；
??.text-capitalize——文本轉換為首字母大寫形式；.text-left——文本左對齊；
??.text-center——文本居中對齊；
??.text-right——文本右對齊；
??.text-justify——文本兩端調整對齊；
轉載于:https://www.cnblogs.com/Jupiter258/p/6071523.html
總結
以上是生活随笔為你收集整理的BootStrap_01之全局样式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vijos p1659——河蟹王国(线段
- 下一篇： 微信里可以开借条了 其中应用了区块链技术