資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何為超大螢幕編寫 Bootstrap 媒體查詢？
Bootstrap 是一個 CSS 框架，可用於為網頁設定樣式，甚至無需在外部檔案中編寫 CSS 程式碼。它是一個開源框架，可免費使用。您只需包含此框架的 CSS 和 JavaScript CDN，即可使用已內建在此框架中的動態和互動式元件。
此框架中定義了一些類，您可以使用這些類來設定網頁元素的樣式。在本文中，我們將學習如何為超大螢幕裝置（如桌上型電腦或曲面螢幕）編寫 Bootstrap 媒體查詢。
Bootstrap 媒體查詢類
序號 |
類 |
描述 |
最小寬度 (px) |
|---|---|---|---|
1 |
.xs |
此類定義用於小型移動裝置等超小型裝置。 |
<576px |
2 |
.sm |
它定義用於移動裝置等小螢幕寬度裝置。 |
>=576px |
3 |
.md |
此類定義 iPad、平板電腦等中等螢幕裝置的寬度。 |
>=768px |
4 |
.lg |
它用於桌上型電腦等較大的螢幕裝置。 |
>=992px |
5 |
.xl |
此類可用於曲面螢幕桌上型電腦等超大或特大螢幕裝置。 |
>=1200px |
從上表可以看出，超大或特大裝置是指螢幕寬度大於或等於 1200px 的裝置，我們將在本文中僅針對這些裝置編寫 Bootstrap 媒體查詢。
現在讓我們透過程式碼示例詳細瞭解這些類的實際實現。
步驟
步驟 1 - 在第一步中，我們將 Bootstrap CSS 和 Bootstrap 指令碼 CDN 包含到我們的文件中，以使用 Bootstrap 類。
步驟 2 - 在下一步中，我們將定義一些常規 HTML 元素，以便在螢幕裝置更改為超大時對其進行更改。
步驟 3 - 在最後一步中，我們將為超大螢幕裝置編寫我們自己的 CSS，並在視口寬度超過 1200px 時檢視螢幕上的更改。
示例
以下示例將說明如何編寫您自己的 Bootstrap 媒體查詢類 CSS 來定義您的樣式。
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet">
<style>
body{
background-color: bisque;
}
@media screen and (min-width: 1200px) {
body{
background-color: aqua;
}
.result{
color: red;
}
}
</style>
</head>
<body>
<div class = "container text-center">
<h2 class = "display-4">Writing the bootstrap media queries for very large screens </h2><br/>
<p class = "lead"> <b>The background color of body and the text color of below text will change for extra large screen width devices.</b></p>
<br/>
<p class = "lead result">The text color of this text will change to red for very large screen devices and remains black for smaller ones.</p>
</div>
<!-- bootstrap JavaScript cdn -->
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"> </script>
</body>
</html>
在上面的示例中，我們在媒體查詢內使用了我們自己的 CSS 樣式，而沒有使用 Bootstrap 媒體類。對於較大的螢幕裝置，body 的背景顏色將從bisque更改為aqua，下面段落標籤的文字顏色將從黑色更改為紅色。
現在讓我們再看一個程式碼示例，在該示例中，我們將更改網頁上存在的容器的寬度以適應不同的螢幕裝置。
演算法
上面這個示例和這個示例的演算法幾乎相同。您只需要新增一些額外的 CSS 來更改不同螢幕裝置的寬度。
示例
以下示例將說明如何更改網頁上任何容器或元素的寬度以適應不同的媒體裝置。
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet">
<style>
body{
background-color: bisque;
}
@media screen and (min-width: 1200px) {
body{
background-color: aqua;
}
.container{
width: 50%;
}
.result{
color: red;
}
}
</style>
</head>
<body>
<div class = "container text-center">
<h2 class = "display-4">Writing the bootstrap media queries for very large screens </h2> <br/>
<p class = "lead"> <b>The background color of body and the text color of below text will change for extra large screen width devices. </b></p>
<br/>
<p class = "lead result">The text color of this text will change to red for very large screen devices and remains black for smaller ones.</p>
</div>
<!-- bootstrap JavaScript cdn -->
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
在上面的示例中，我們使用了 CSS 媒體查詢為寬度大於或等於 1200px 的裝置定義我們自己的樣式。我們已將超大螢幕裝置的容器寬度更改為 50%。
結論
在本文中，我們學習瞭如何為超大螢幕裝置編寫 Bootstrap 媒體查詢。我們透過在兩個不同的程式碼示例中實際實現它來詳細瞭解並理解它。
73 次瀏覽
