當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

boot-1学习

發布時間：2023/12/10 编程问答 19 豆豆

生活随笔收集整理的這篇文章主要介紹了 boot-1学习小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Bootstrap-1學習

- Bootstrap介紹
- 一. 響應式布局(css3的技術)
- - - 1. 什么是響應式
    - 2. 響應式網頁必要的要求
    - 3.移動設備的適配 --視口-- 這部分在pc端上沒用
- 二.Bootstrap
- 1.起步
- 2.全局css

Bootstrap介紹

bootrap簡稱boot,是一個簡潔的,直接的,強悍的,直接的一個框架,這是官方對它的描述.主要用于響應式和移動端的布局.bootstrap是封裝了一些常用的css樣式和js腳本(也就是說已經幫我們寫好了,用的時候引用就可以了),例如一些滾動條,菜單,模態框,輪播圖等等…

① 3個需要掌握的知識點: 媒體查詢+ 柵格布局+ scss
② bootstrap官網
bootstrap中文網
bootstrap英文網

有boot的學習文檔

有很多的業內技術學習文檔

BootCDN

一. 響應式布局(css3的技術)

1. 什么是響應式

響應式網頁 Respomsive web page
根據瀏覽網頁的設備不同(設備: 硬件, 尺寸, 分辨率, 解析度, 橫豎屏…)
自動改變頁面布局, 圖片文本效果, 不影響用戶瀏覽體驗

2. 響應式網頁必要的要求

布局盡量不要固定容器的尺寸, 盡量使用默認文檔流+浮動+彈性的寫法布局(針對初學者)

文本圖片大小隨容器大小改變

媒體查詢技術(css3提供)

如何測試響應式網頁

我們開發時一般使用chrome自帶的模擬軟件

使用真實設備測試使用模擬軟件測試chrome自帶的模擬軟件

優點:測試效果真實可靠	優點: 便宜, 方便	優點: 極其方便
缺點:成本高, 測試任務量巨大	缺點: 測試效果有限,需要進行一步驗證	測試效果極其有限

編寫響應式布局

響應式布局 -----> 適配移動設備
復雜頁面不適合使用響應式

3.移動設備的適配 --視口-- 這部分在pc端上沒用

移動設備的適配代碼(一般會自動生成)

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

初學者, 盡量使用相對尺寸, 不要使用絕對尺寸, 盡量使用默認文檔流+浮動+彈性, 不要使用定位

媒體查詢
根據設備和屏幕尺寸不同, 使用不同css樣式, 忽略其他css樣式

媒體: 設備 screen (pc,pad,phone)/print/TV屏幕尺寸

超小屏 xs	576px > 屏幕尺寸
小屏 sm	768px > 屏幕尺寸 >= 576px
中屏 md	992px > 中屏幕 >= 768px
大屏 lg	1200px > 屏幕尺寸 >= 992px
超大屏 xl	屏幕尺寸>=1200px

案例:

@media (min-width: 576px) and (max-width:767.99px){.d1{font-size: 42px;color: 0ff;background-color: #faa;}}

媒體查詢代碼優化
可以不寫設置的條件

@media (min-width: 576px) and (max-width:767.99px){.d1{font-size: 42px;color: 0ff;background-color: #faa;}} /* 按照boot的寫法，小屏幕在大屏幕沒有寫的情況下，向上兼容 */ @media (min-width:576px) {} /*sm md lg xl*/ @media (min-width:768px) {} /* md lg xl*/ @media (min-width:992px) {} /* lg xl*/ @media (min-width:1200px) {} /* xl*/

二.Bootstrap

起步

全局css

組件/js插件

定制SCSS

1.起步

設置視口

2.全局css

boot 不支持超小屏
boot 封裝的所有響應式向上兼容
boot 默認 1rem = 16px

**容器 **

.container 定寬容器, 在不同屏幕尺寸下, 設置了最大寬度
.container-fluid 變寬容器
所有的boot代碼,都必須寫在容器中

按鈕相關的代碼

.btn 按鈕的基本類 , 封裝了按鈕相關的42行代碼, 文本邊框,背景,偽類
按鈕顏色 btn-danger紅色/btn-info信息色/btn-primary主要/btn-secondary次要/btn-dark深色/btn-light淺色/btn-success綠色/btn-warning黃色
鏤空按鈕 btn-outline-danger/warning/success…
按鈕大小 .btn-lg大/.btn-sm小/
.btn-block 塊級按鈕

圖片的相關代碼