當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

Bootstrap响应式Web开发(一)

發布時間：2023/12/8 HTML 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 Bootstrap响应式Web开发(一) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Bootstrap響應式Web開發(一)

- Bootstrap響應式Web開發(一)
- 一、Bootstrap的概念、特點及組成
- 二、瀏覽器
- 三、Visual Studio Code
- 四、移動端開發主流方案
- 五、移動Web開發基礎
- - （一）視口
  - （二）移動Web頁面的樣式編寫
  - （三）分辨率和設備像素比
  - （四）二倍圖
  - （五）SVG矢量圖

一、Bootstrap的概念、特點及組成

Bootstrap是一款非常優秀的Web前端框架，其靈活性和可擴展性加速了響應式頁面開發的進程。Bootstrap遵循移動優先的原則，在開源之后迅速受到開發人員的追捧，推動了響應式技術的發展
1、基本概念：Bootstrap是一個基于HTML、CSS和JavaScript語言編寫的框架，具有簡單、靈活的特性，擁有樣式庫、組件和插件，常用來開發響應式布局和移動設備優先的Web項目，能夠幫助開發者快速搭建前端頁面
2、特點：豐富的組件庫、響應式設計、移動設備優先、瀏覽器支持、低成本，易上手、CSS預編譯、框架成熟
3、組成

基本結構：Bootstrap提供了一個帶有網格系統、鏈接樣式、背景的基本結構
CSS樣式庫：Bootstrap自帶了全局的CSS樣式，并預先定義了基本的HTML元素樣式、可擴展的class
布局組件：Bootstrap包含了豐富的組件庫，提供了十幾個可重用的組件
插件：Bootstrap提供了一些基于jQuery（一個用于簡化JavaScript編程的庫）構建的可選插件

二、瀏覽器

1、PC端的瀏覽器
①瀏覽器按照設備類型來劃分，主要包括PC端瀏覽器和移動端瀏覽器
②瀏覽器內核主要包括Blink、WebKit和Trident等
③PC端的瀏覽器主要包括Google（谷歌）公司的Chrome瀏覽器、Mozilla公司的Firefox瀏覽器、和Edge瀏覽器等
2、移動端設備
①移動端設備主要包括Android、iOS等手機設備。
②屏幕尺寸非常多，手機分辨率和大小也不盡相同，碎片化嚴重
③常見的移動端設備的屏幕尺寸

移動端的瀏覽器主要包括Android Browser和Mobile Safari，以及國產瀏覽器
瀏覽器的內核主要是Webkit內核，對HTML5提供了很好的支持
國產瀏覽器主要包括UC瀏覽器、QQ瀏覽器和百度瀏覽器等
移動Web開發使用HTML、CSS和JavaScript等基本語言
移動端Web項目的呈現依賴于移動端瀏覽器
注：移動Web開發需要注意的兩點
移動端設備受屏幕尺寸限制
移動端的操作方式的改變

三、Visual Studio Code

1、Visual Studio Code（簡稱VS Code）是由微軟公司推出的一款免費、開源的代碼編輯器。它的的特點是簡單、便捷、高效
2、優勢

輕巧極速，占用系統資源較少
具備語法高亮顯示、智能代碼補全、自定義快捷鍵和代碼匹配等功能
跨平臺。VS Code編輯器是跨平臺的（支持Mac、Windows和Linux），可以在不同平臺來進行項目開發
主題界面的設計比較人性化。VS Code編輯器可以快速查找文件并直接進行開發，可以通過分屏顯示代碼，可以自定義主題顏色（默認為黑色），也可以快速查看最近打開的項目文件和查看項目文件結構
提供豐富的插件。用戶根據需要自行下載和安裝插件，并使用此插件提供的功能

四、移動端開發主流方案

1、單獨制作移動端頁面
①優勢
可以充分考慮到平臺的優勢和局限性
創建良好的用戶體驗設計
網頁在移動設備上加載更快
②劣勢
移動端網站會產生多個URL（PC端一套URL，移動端一套URL）
維護成本會增加，工作量比較大
重定向移動網站需要花費一些時間，需要對搜索引擎做一些處理
單獨制作移動端頁面，通常的做法是不改變原有的PC端頁面，然后針對移動端單獨開發出一套特定的版本
2、制作響應式頁面
響應式頁面指的是同一頁面在不同屏幕尺寸下實現不同的布局，從而使一個頁面兼容不同的終端。響應式開發主要是為了解決移動互聯網瀏覽的問題
響應式頁面的優點

可以跨平臺。響應式開發具有跨平臺的優勢，能夠快捷地解決多終端設備的顯示適配問題
便于搜索引擎收錄，無論在移動端設備還是PC端上訪問的都是同一個鏈接地址，這樣就減少了權重的分散。讓網站對搜索引擎更加友好
節約成本。響應式網站可以兼容多個終端，開發者不需要為各個終端編寫不同的代碼。對于開發者而言，減少了大量重復的工作，提高了工作的效率；對于公司而言，節省了人員開支，降低了開發成本

五、移動Web開發基礎

（一）視口

1、概念：視口（Viewport）最早是由蘋果公司在推出iPhone手機時發明的，其目的是為了讓iPhone的小屏幕盡可能完整顯示整個網頁，它是瀏覽器顯示頁面內容的屏幕區域。
2、分類視口主要包括布局視口（layout viewport）、視覺視口（visual viewport）和理想視口（ideal viewport）。視口能將大分辨率尺寸網頁縮小顯示在手機瀏覽器上，這樣保證網頁在手機上看起來更像在桌面瀏覽器中的樣子
(1)布局視口：布局視口是指網頁的寬度，一般移動端瀏覽器都默認設置了布局視口的寬度，布局視口的默認寬度有可能是768px、980px或1024px等（取決于不同移動端設備的設置），這個寬度并不適合在手機屏幕中展示。當移動端瀏覽器展示PC端網頁內容時，由于移動端設備屏幕比較小，布局視口不能像PC端瀏覽器那樣完美地展示網頁，網頁在手機的瀏覽器中會出現左右滾動條，用戶需要左右滑動才能查看完整的一行內容
(2)理想視口：指對設備來講最理想的視口尺寸

采用理想視口的方式，可以使網頁在移動端瀏覽器上獲得最理想的瀏覽和閱讀的寬度。
在理想視口情況下，布局視口的大小和屏幕寬度是一致的，這樣就不需要左右滾動頁面了
在開發中，為了實現理想視口，需要給移動端頁面添加標簽配置視口，通知瀏覽器來進行處理
為了方便對不同屏幕尺寸的設備進行適配，PC端的Chrome瀏覽器在開發者工具中加入了模擬移動端屏幕的功能，可以模擬各種手機的顯示效果。
利用Chrome瀏覽器模擬手機屏幕，來觀察移動端屏幕的顯示效果，可以幫助我們更好地理解視口
案例：利用Chrome瀏覽器模擬手機屏幕

<body><div class="title">新款Android手機</div><img src="picture1.jpg" alt=""> </body> <style>.title {font-size: 20px;color: red;} </style>

3、利用標簽設置視口
在傳統的PC端網頁開發中，并沒有使用過meta標簽來設置視口，此時瀏覽器會按照默認的布局視口寬度來顯示網頁。如果希望網頁在瀏覽器中以理想視口的形式呈現，就需要利用標簽設置視口，在標簽中，將name屬性設為viewport，即可設置視口
在標簽的基本語法中，將標簽的content屬性的值設置為“width=device-width”表示通知瀏覽器，布局視口的寬度應該與設備的寬度一致，示例代碼如下

4、視口的常用設置
在使用標簽設置視口時，該標簽的常用設置參數如下

（二）移動Web頁面的樣式編寫

1、利用Normalize.css初始化默認樣式
在傳統的PC端Web開發中，一些舊版本的瀏覽器不符合W3C標準，有些不支持HTML5和CSS3的新特性，給開發人員帶來了許多麻煩。
在移動Web開發中，幾乎不用擔心瀏覽器的兼容問題，因為移動端的瀏覽器基本上都是以WebKit內核為主，對HTML5和CSS3的支持非常好
特點:保留默認樣式、一致性、模塊化開發、文檔
2、設置box-sizing為border-box
在CSS3中，通過box-sizing屬性可以更改盒子尺寸的計算方式。將box-sizing設為content-box（默認值）時，表示使用傳統的計算方式；
將box-sizing設為border-box時，表示使用CSS3的一種新的計算方式，通過這種方式可以解決傳統盒子在添加了邊框和內邊距之后，盒子被撐大的問題

/* 傳統計算方式 */ box-sizing: content-box; /* 新的計算方式 */ box-sizing: border-box;

使用content-box計算方式的盒子模型，其寬度的計算公式如下
盒子的寬度 = CSS中設置的width + border + padding
使用border-box計算方式的盒子模型，其寬度的計算公式如下
盒子的寬度 = CSS 中設置的width
注：當采用border-box計算方式時，CSS中設置的寬度width已經包含了border和padding值，不用擔心因為設置了元素的border和padding導致盒子被撐大的問題。這種方式的優點在于，盒子的大小是固定的，不會受到邊框和內邊距的影響，也不會影響到頁面中其他盒子的結構。因此，在移動Web開發中，推薦使用border-box這種計算方式
示例演示content-box與border-box的區別

<body><div>content-box</div><div>border-box</div> </body> <style>div { width: 100px; height: 100px; padding: 10px; background-color: #eee; }div:nth-child(1) { border: 10px solid #999; box-sizing: content-box; }div:nth-child(2) { border: 10px solid #666; box-sizing: border-box; } </style>

3、設置移動端的特殊樣式
在實際開發中，移動Web頁面的設計風格更接近App（手機應用），而不是傳統的網頁。為了有更好的用戶體驗，我們可以給移動Web頁面設置一些特殊樣式。
移動端的特殊樣式是非標準的，因此加上了私有前綴“-webkit-”，該前綴在WebKit和Blink內核的瀏覽器中有效，適用于Chrome瀏覽器和大多數移動端瀏覽器
在移動Web開發中經常會設置的特殊樣式，如表所示

（三）分辨率和設備像素比

1、分辨率
在移動端Web開發的過程中，除了要使用標簽設置理想視口之外，還需要解決移動端頁面中圖片的顯示問題。圖片的顯示是否清晰，與屏幕分辨率、圖像分辨率和設備像素比有關
分辨率分為屏幕分辨率和圖像分辨率。屏幕分辨率是指一個屏幕上可以顯示多少信息，通常以像素（px）為單位來衡量。在同一臺設備上，圖片的像素點和屏幕的像素點通常是一一對應的

屏幕分辨率1920×1080表示水平方向含有1920個像素，垂直方向含有1080個像素，屏幕上總共有2 073 600個像素點
在屏幕的大小相同的情況下，如果屏幕的分辨率低（如640×480），則屏幕上顯示的像素少，單個像素點比較大，看起來會有種顆粒感
在屏幕的大小相同的情況下，如果屏幕的分辨率高（如1920×1080），則屏幕上顯示的像素多，單個像素點比較小，看起來會比較清晰
圖像分辨率500×200表示這張圖片在屏幕上按1:1顯示時，水平方向有500個像素點（色塊），垂直方向有200個像素點（色塊）
注：圖片的分辨率越低，圖片越模糊。圖片的分辨率越高，圖片越清晰
當圖片放大時，圖片在屏幕上顯示的像素變大，軟件通過算法對圖像進行了像素補充；當圖片縮小時，也是通過算法將顯示的圖片像素進行減少
2、設備像素比
在傳統的PC端和早期的普通手機中，屏幕上的一個像素和網頁CSS中的一個像素是完全對應的
隨著技術的進步，為了提高屏幕顯示的細膩度，高分辨率的屏幕開始流行，一塊屏幕可以顯示更多的像素
隨之產生了一個問題，就是同一個網頁在不同分辨率的屏幕下顯示效果會有大小差異，因為CSS中使用的像素是一個固定值，它不會因為屏幕分辨率而發生改變
在屏幕尺寸相同的情況下，一個12px的文字在低分辨率的屏幕中的尺寸很大，但在高分辨率的屏幕中尺寸很小
在分辨率非常高的屏幕中，文字會顯得特別小，不利于瀏覽
在高分辨率屏幕中，CSS使用的像素單位和屏幕顯示的像素并不是一對一的，將屏幕像素除以CSS像素得到的就是設備像素比。為了解決這個問題，高分辨率設備的操作系統會對網頁畫面進行縮放，讓大小看上去比較舒適，而網頁中使用的像素也不必修改。尤其是網頁中的文字，在高分辨率屏幕下的顯示效果會更加細膩

（四）二倍圖

1、概念:二倍圖可以理解為當設備像素比很大時，圖片會被放大，而放大會讓圖片看起來模糊。為此，我們可以使用二倍圖的方式來提高圖片的清晰度。
例如：當一個50px×50px（CSS像素）的圖片直接放到iPhone 6/7/8設備中顯示時，圖片會被放大，長和寬都放大到原來的二倍（iPhone 6/7/8的設備像素比為2），即100px×100px
2、使用方法示例

<body><img src="images/50.png" alt=""><img src="images/100.png" alt=""> </body> <style>img:nth-child(2) {width: 50px; height: 50px; } </style>

3、背景圖片的縮放
除了使用標簽插入的圖片，還會用到背景圖片，所以背景圖片也需要設置縮放效果。
在CSS 3中，提供了background-size屬性用來規定背景圖片的尺寸，從而達到背景圖片的縮放效果。
background-size設置的寬度和高度可以是像素或百分比。使用background-size的基本語法如下
background-size: 背景圖片的寬度背景圖片的高度;
除像素或百分比以外，background-size屬性還可以用其他的屬性值來實現不同的縮放效果，如表所示

（五）SVG矢量圖

1、概念
可縮放矢量圖形（Scalable Vector Graphics，SVG）是一種開放標準的描述矢量圖形的語言，它基于XML（可擴展標記語言）。在2003年1月，SVG 1.1被確立為W3C（萬維網聯盟）標準
2、優勢：文本可選、開發、讀取和修改、文本體積小、可伸縮
3、標簽和樣式

SVG使用標簽的方式定義各種圖形，外層標簽是<svg>，viewBox可以定義用來觀察 SVG視圖的一個矩形區域，它的屬性主要包括x、y、width、height，用數字表示，每個數字之間用空格或逗號隔開，表示定義一個在左上角(x, y)坐標位置，寬度為width，高度為height的矩形。常用屬性如表所示

在<svg>標簽的內部，可以使用SVG提供的一些預定義的標簽來繪制圖形，或者繪制文字。

常用的內部標簽如表所示
SVG常用的內部標簽還可以通過屬性來設置樣式，常用的屬性如表所示
4、SVG使用示例

總結

以上是生活随笔為你收集整理的Bootstrap响应式Web开发(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：响应式网页字体图标
下一篇：响应式Web设计：HTML5和CSS3实