一、概念
1. 基本概念
Bootstrap 是一个开源的前端框架,用于快速开发响应式和移动优先的网站。响应式布局是一种网页设计方法,旨在使网站能够兼容多个终端设备,包括桌面电脑、平板电脑和手机等,而不需要为每个设备单独开发特定版本。文档地址包括https://www.bootcss.com/和https://v4.bootcss.com/,进入官网下载bootstrap文件引入代码并使用。
2. 下载步骤
进入https://www.bootcss.com/地址,看到如下的页面,点击如图:
再将以上两个文件夹放在一个文件夹里,最后使用响应式布局时引入,引入步骤如下
二、布局种类
1. PC端布局
PC端布局通常采用多列设计,充分利用宽屏显示器的空间,展示更多内容。导航菜单通常横向排列,放置在页面顶部或侧边栏,方便用户使用鼠标进行精确点击和悬停操作。而移动端布局则以单列设计为主,适应较窄的屏幕宽度,内容纵向排列,导航菜单多采用折叠形式(如汉堡菜单),并注重触屏操作的便捷性。通过响应式设计,网页能够根据屏幕尺寸自动调整布局和样式,确保在不同设备上都有良好的用户体验。通常是版心+通栏设计,如图:
2. 移动端布局
移动端布局设计专注于适应小屏幕设备,如智能手机和平板。通常采用单列布局,内容纵向排列,避免横向滚动。导航菜单通常采用折叠形式(如汉堡菜单),以节省空间,并便于用户通过点击展开访问。移动端设计注重触屏操作,交互元素如按钮和链接需要足够大,确保用户能轻松点击。布局和字体也需调整,以保证在较小屏幕上内容清晰可读。通过响应式设计,网页可以根据不同设备自动调整,提供一致的用户体验。移动端是百分比的移动端设计,如图:
3. 响应式布局
响应式布局是一种网页设计方式,使同一页面在不同设备的屏幕下展示不同的UI效果,确保在各种尺寸的屏幕上都有良好的用户体验。通过使用Bootstrap框架,开发者可以大大提高响应式页面的开发效率,利用其预定义的CSS类和组件,快速构建适应多种设备的网页布局,从而简化开发过程。响应式布局在PC端、平板电脑和移动端呈现不同的表现形式。
三、响应式的基础操作
1. 响应式的原理
响应式布局的原理是媒体查询。CSS媒体查询允许开发者为不同屏幕尺寸、分辨率等条件定义不同的样式规则。页面根据这些条件选择性地应用特定的样式,使其在各类设备上都有合适的布局和设计。
2. 基本模板
基本模板包括导航条,内容区及底部,运行此代码,可以得到不同尺寸下的不同样式,基本代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout</title>
<!-- 引入 Bootstrap CSS -->
<link href="./bootcss/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 主内容区 -->
<div class="container mt-4">
<div class="row">
<!-- 左侧栏 -->
<div class="col-md-4 col-sm-12">
<div class="p-3 border bg-light">Left Sidebar</div>
</div>
<!-- 主内容 -->
<div class="col-md-8 col-sm-12">
<div class="p-3 border bg-light">Main Content</div>
</div>
</div>
</div>
<!-- 页脚 -->
<footer class="bg-light text-center p-3 mt-4">
© 2024 Your Company. All rights reserved.
</footer>
<!-- 引入 Bootstrap JS -->
<script src="./bootcss/js/bootstrap.bundle.js"></script>
</body>
</html>
3. 栅格布局
栅格系统是响应式网页设计中的一个核心概念,用于将网页布局划分为若干列,方便内容的排列和布局。通过栅格系统,开发者可以在不同设备上创建一致的布局,并且可以根据屏幕尺寸灵活调整内容的排列方式。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基本模板</title>
<link rel="stylesheet" href="./bootcss/css/bootstrap.css">
<style>
.row>div {
height: 60px;
border: 1px solid red;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<!-- 中等屏幕划分1行4列 最大数字12 -->
<!-- 数字等于多少 div.col-md-数字 -->
<h3>实例1</h3>
<div class="col-md-3">
1
</div>
<div class="col-md-3">
2
</div>
<div class="col-md-3">
3
</div>
<div class="col-md-3">
4
</div>
<div class="col-md-3">
5
</div>
</div>
<h3>实例2</h3>
<div class="row">
<!-- 小屏幕:1行2列,中等:1行3个, 大:1行4个 -->
<!-- 小:12/2 = 6 -->
<!-- 中:12/3 = 4 -->
<!-- 大:12/4 = 3 -->
<div class="col-sm-6 col-md-4 col-lg-3"></div>
<div class="col-sm-6 col-md-4 col-lg-3"></div>
<div class="col-sm-6 col-md-4 col-lg-3"></div>
<div class="col-sm-6 col-md-4 col-lg-3"></div>
</div>
<h3>实例3</h3>
<div class="row">
<!-- 小屏幕:第一列2/12, 二:7/12,三:3/12-->
<div class="col-sm-2">第一列</div>
<div class="col-sm-7">第二列</div>
<div class="col-sm-3">第三列</div>
</div>
</div>
<script>
</script>
</body>
</html>
4. 全局样式
全局样式是指在整个网页或应用中统一应用的CSS样式规则,确保页面或应用在各个部分保持一致的外观和行为。全局样式通常定义基本的页面元素(如文本、按钮、链接、标题等)的样式,以及一些全局的布局规则和响应式设计的基础设置。
5. 组件
在Bootstrap中,组件(Components)是预先构建的、可复用的UI元素,开发者可以直接使用这些组件来构建网页的用户界面。Bootstrap提供了丰富的组件库,这些组件都是响应式的,能够在不同设备上有良好的展示效果。
需要使用哪一个组件可以进入官网复制代码并修改自己想要的样式,更好更高效的得到一个响应式布局。