Jadual Kandungan
Bootstrap 响应式设计
简介
什么是响应式 Web 设计
响应式 Web 设计工作原理
深入研究响应式 Web 设计的 CSS
解释
更快地开发对移动设备友好的布局
Rumah hujung hadapan web html tutorial bootstrap 响应式设计_html/css_WEB-ITnose

bootstrap 响应式设计_html/css_WEB-ITnose

Jun 21, 2016 am 08:54 AM

Bootstrap 响应式设计

简介

本教程讲解如何在网页布局中应用响应式设计。在课程中,您将学到响应式 Web 设计。随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了。响应式 Web 设计就是为实现这个目的的有效方法。

什么是响应式 Web 设计

响应式 Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。例如,您先在计算机显示器上浏览一个网站,然后再智能手机上浏览,智能手机的屏幕尺寸远小于计算机显示器,但是你却没有感觉到任何差别,两者的用户体验几乎一样,这说明这个网站在响应式设计方面做得很好。

我们已经在我们的流动布局实例中应用了响应性能,并请您在不同的屏幕尺寸下进行浏览。您可以通过 Chrome或 FireFox的窗口大小调整的扩展来调整浏览器。

点击这里,可以查看 Bootstrap 响应式设计实例。

响应式 Web 设计工作原理

为了应用响应式 Web 设计,您需要创建一个包含适应各种设备尺寸样式的 CSS。一旦页面在特定的设备上加载,该页面上使用了各种字体和 Web 开发技术,比如媒体查询(Media Queries),此时,会先检测设备的视口大小,然后加载特定于设备的样式。

深入研究响应式 Web 设计的 CSS

我们将通过 'bootstrap-responsive.css' 的学习,来了解"响应式设计"是如何实现细微差别的。在这之前,您必须在网页的头部区域加入下面这行代码:

1

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Salin selepas log masuk

视口的 meta 标签,重写了默认的视口,并帮助加载与特定视口相关的样式。

width属性设置屏幕宽度。它包含一个值,比如 320,表示 320 像素,或者值为 'device-width',用来告诉浏览器使用原始的分辨率。

initial-scale属性是视口最初的比例。当设置为 1.0 时,将呈现设备的原始宽度。

当然,您必须添加 Bootstrap 的响应式 CSS,如下所示:

1

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Salin selepas log masuk

现在,如果您查找响应式 CSS 文件,您会发现,在一些公共的声明后边(从行号 10 到 22),有各种以 '@media'开始的区域。这就是如何编写适用于各种设备的样式。

第一个区域以 ' @media (max-width: 480px)' 开始,为最大宽度为 480 像素的设备设置样式。

第二个区域以 ' @media (max-width: 767px)' 开始,为最大宽度为 767像素的设备设置样式。

第三个区域以 ' @media (min-width: 768px) 和 (max-width: 979px)' 开始,为最大宽度为 768 像素和最大宽度为 979 像素的设备设置样式。

下一个区域是为最大宽度为 979 像素的设备设置样式。所以是以 ' @media (max-width: 979px)' 开始。

最后两个区域分别以 ' @media (min-width: 980px)' 和 '@media (min-width: 1200px)' 开始,前一个是为最小宽度为 980 像素的设备设置样式,后一个是为最小宽度为 1200 像素的设备设置样式。

所以,这样样式表的基本作用就是,通过使用 ' min-width' 和 ' max-width' 属性,来根据设备的最大宽度和最小宽度决定使用的样式。

解释

为了让布局更具响应性,Bootstrap 做了三件事情:

1. 修改了网格中列的宽度。

2. 只要有需要,它就使用堆栈元素,而不是浮动元素。如果您还不清楚什么是堆栈元素,下面来自 w3.org 的表单可能会提供一些帮助:

根元素(html)形成了堆栈上下文的根,其他堆栈上下文通过任意定位的元素生成(包括相对定位元素,有一个 'z-index' 的计算值,而不是 'auto')。堆栈上下文相对与包含的块不是必需的。

3.要正确地渲染标题和文字它们的尺寸。

更快地开发对移动设备友好的布局

Bootstrap 有几个实用的用于开发对移动设备友好的布局的类。这些类可在 'responsive.less' 上看到。

.visible-phone,在宽度为 767px 及以下的手机上可见,在 979px 到 768px 的平板上隐藏不可见,在桌面上隐藏不可见,这是默认的。

.visible-tablet,在宽度为 767px 及以下的手机上隐藏不可见,在 979px 到 768px 的平板上可见,在桌面上隐藏不可见,这是默认的。

.visible-desktop,在宽度为 767px 及以下的手机上隐藏不可见,在 979px 到 768px 的平板上隐藏不可见,在桌面上可见,这是默认的。

.hidden-phone,在宽度为 767px 及以下的手机上隐藏不可见,在 979px 到 768px 的平板上可见,在桌面上可见,这是默认的。

.hidden-tablet,在宽度为 767px 及以下的手机上可见,在 979px 到 768px 的平板上隐藏不可见,在桌面上可见,这是默认的。

.hidden-desktop,在宽度为 767px 及以下的手机上可见,在 979px 到 768px 的平板上可见,在桌面上隐藏不可见,这是默认的。

点击这里,下载本教程中使用到的所有 HTML、CSS、JS 和图片文件。

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Mar 04, 2025 pm 12:32 PM

Cache kemas kini laman web akaun rasmi, perkara ini mudah dan mudah, dan ia cukup rumit untuk minum periuknya. Anda bekerja keras untuk mengemas kini artikel akaun rasmi, tetapi pengguna masih membuka versi lama. Dalam artikel ini, mari kita lihat kelainan dan bertukar di belakang ini dan bagaimana menyelesaikan masalah ini dengan anggun. Selepas membacanya, anda boleh dengan mudah menangani pelbagai masalah caching, yang membolehkan pengguna anda sentiasa mengalami kandungan segar. Mari kita bincangkan asas -asas terlebih dahulu. Untuk meletakkannya secara terang -terangan, untuk meningkatkan kelajuan akses, penyemak imbas atau pelayan menyimpan beberapa sumber statik (seperti gambar, CSS, JS) atau kandungan halaman. Kali seterusnya anda mengaksesnya, anda boleh mengambilnya secara langsung dari cache tanpa perlu memuat turunnya lagi, dan ia secara semula jadi cepat. Tetapi perkara ini juga pedang bermata dua. Versi baru dalam talian,

Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Mar 04, 2025 pm 02:39 PM

Artikel ini menunjukkan penambahan sempadan PNG yang cekap ke halaman web menggunakan CSS. Ia berpendapat bahawa CSS menawarkan prestasi unggul berbanding dengan JavaScript atau perpustakaan, memperincikan cara menyesuaikan lebar sempadan, gaya, dan warna untuk kesan halus atau menonjol

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Mar 17, 2025 pm 12:27 PM

Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.

Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Mar 17, 2025 pm 12:20 PM

Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.

Apakah tujuan & lt; kemajuan & gt; unsur? Apakah tujuan & lt; kemajuan & gt; unsur? Mar 21, 2025 pm 12:34 PM

Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik? Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik? Mar 12, 2025 pm 04:05 PM

Artikel ini menerangkan html5 & lt; time & gt; elemen untuk perwakilan tarikh/masa semantik. Ia menekankan pentingnya atribut DateTime untuk pembacaan mesin (format ISO 8601) bersama teks yang boleh dibaca manusia, meningkatkan aksesibilit

See all articles