详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)

前言

CSS3媒体查询是前端响应式布局常用的技术之一。Bootstrap框架则是一套使用CSS、JavaScript和图标字体等技术开发的前端框架，可以大大提高开发效率。本文将深入探讨CSS3媒体查询与Bootstrap框架的原理，并结合实战操作进行详细讲解。

CSS3媒体查询

常见媒体类型

screen：电脑屏幕
print：打印机屏幕
tv：电视屏幕
speech：屏幕阅读器

媒体查询的语法格式

@media 媒体类型 and (条件){
  /*样式*/
}

示例一：针对不同设备分别设置背景颜色

/*电脑屏幕*/
@media screen and (min-width: 1024px){
  body{
    background-color: #fff;
  }
}
/*手机屏幕*/
@media screen and (max-width: 768px){
  body{
    background-color: #000;
  }
}

示例二：针对设备方向设置样式

/*横屏*/
@media screen and (orientation: landscape){
  /*样式*/
}
/*竖屏*/
@media screen and (orientation: portrait){
  /*样式*/
}

Bootstrap框架

栅格系统

Bootstrap的栅格系统是响应式布局的重要组成部分，它通过行和列构成页面的基本布局。一个网页被分为12列，可以根据不同设备在这些列上进行布局。

样式类

Bootstrap中提供了丰富的样式类，可以快速实现各种网页元素和组件的样式。常用的样式类如下：

.container：容器，用于包裹网页内容，可以自适应屏幕大小。
.row：行，用于包裹列。
.col-：列，代表不同的屏幕尺寸，如col-xs-、col-sm-、col-md-、col-lg-。
.navbar：导航栏，用于创建网站导航。
.btn：按钮，用于创建按钮。
.form-control：表单控件，用于创建表单元素。

示例三：使用Bootstrap开发响应式网页

以下代码实现了一个含有导航栏、表格、表单、按钮和图片的响应式网页：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap页面</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Bootstrap</a>
      </div>
      <ul class="nav navbar-nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">关于我们</a></li>
      </ul>
    </div>
  </nav>
  <div class="container">
    <h1>Bootstrap页面</h1>
    <div class="row">
      <div class="col-sm-6">
        <table class="table">
          <thead>
            <tr>
              <th>姓名</th>
              <th>性别</th>
              <th>年龄</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>张三</td>
              <td>男</td>
              <td>20</td>
            </tr>
            <tr>
              <td>李四</td>
              <td>女</td>
              <td>19</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="col-sm-6">
        <form>
          <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" class="form-control" id="username">
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password">
          </div>
          <button type="submit" class="btn btn-default">登录</button>
        </form>
        <img src="https://picsum.photos/300/200" class="img-responsive">
      </div>
    </div>
  </div>
  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>