Bootstrap 4与Bootstrap 3布局对齐对比及代码解析

Hey there! Let’s start by breaking down the key layout alignment differences between Bootstrap 4 and 3, then dive into that Bootstrap 4 header code you shared.

一、Bootstrap 4 vs Bootstrap 3 布局对齐核心差异 #

1. 底层布局引擎的本质区别 #

• Bootstrap 3：依赖传统的浮动（float）、定位（position）和表格布局来实现对齐，这种方式容易出现 clearfix、文档流脱离等问题，垂直对齐尤其麻烦。
• Bootstrap 4：全面采用Flexbox作为核心布局引擎，从根源上简化了对齐逻辑，所有对齐操作都基于弹性盒模型，布局更灵活、稳定。

2. 水平对齐方式 #

• Bootstrap 3：
  • 行内/文本元素用 text-left/text-center/text-right
  • 块级元素需要手动设置 margin: 0 auto 实现居中
  • 浮动对齐用 pull-left/pull-right，但会脱离文档流，必须搭配 .clearfix 清除浮动
• Bootstrap 4：
  • 弹性容器内用 justify-content-start/center/end/around/between 实现灵活的水平分布
  • 块级元素直接用 mx-auto 类就能实现水平居中
  • 保留了浮动类（float-left/right）但不推荐，优先用 Flexbox 方案

3. 垂直对齐方式 #

• Bootstrap 3：没有原生的垂直对齐类，只能通过以下 hack 方式实现：
  • 用 display: table-cell + vertical-align: middle
  • 自定义 padding/margin 调整位置
  • 绝对定位配合 top: 50% + transform: translateY(-50%)
• Bootstrap 4：
  • 弹性容器内用 align-items-start/center/end 统一控制所有子元素的垂直对齐
  • 单个弹性项用 align-self-start/center/end 单独调整
  • 块级元素用 my-auto 实现父容器内的垂直居中，无需自定义样式

4. 响应式对齐支持 #

• Bootstrap 3：响应式对齐需要手动编写媒体查询，比如要实现“移动端居中，PC端右对齐”，得自己写自定义类
• Bootstrap 4：所有对齐类都支持响应式前缀，比如 justify-content-md-center、align-items-sm-end，直接用原生类就能实现不同断点的对齐效果

二、Bootstrap 4 页面头部代码解析 #

首先补全你提供的截断代码（完整的标准Bootstrap 4头部结构如下）：

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

    <!--font awesome-->
    <script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
    
    <title>Bootstrap 4 Page</title>
</head>
<body>
    <!-- Page content goes here -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>

逐部分解析：

1. 基础文档结构 #

• <!doctype html>：HTML5标准文档声明，确保浏览器以标准模式渲染页面
• <html lang="en">：指定页面语言为英语，有助于SEO优化和无障碍访问工具识别

2. 必选Meta标签 #

• <meta charset="utf-8">：设置页面字符编码为UTF-8，保证所有字符（包括特殊符号、中文等）都能正确显示
• <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">：
  • width=device-width：让页面宽度匹配设备屏幕宽度，是响应式布局的基础
  • initial-scale=1：设置页面初始缩放比例为1:1
  • shrink-to-fit=no：Bootstrap 4新增属性，专门解决iOS Safari浏览器旋转屏幕时的自动缩放问题

3. Bootstrap CSS引入 #

• 通过CDN加载Bootstrap 4.1.0的压缩CSS文件
• integrity：子资源完整性（SRI）校验，确保加载的CSS文件没有被篡改，提升安全性
• crossorigin="anonymous"：表示跨域请求时不携带用户凭证（如Cookie）

4. Font Awesome 图标引入 #

• <script defer src="...">：defer属性让脚本在文档解析完成后再执行，不会阻塞页面渲染
• 这里加载的是Font Awesome 5的JS文件，用于动态加载图标字体

5. 底部JavaScript依赖 #

Bootstrap 4的JS组件依赖jQuery和Popper.js，必须按顺序引入：

• jQuery Slim：精简版jQuery，去掉了Ajax、动画等非必需模块，适合Bootstrap的基础需求
• Popper.js：用于实现下拉菜单、工具提示等组件的弹出定位
• Bootstrap JS：Bootstrap的核心JS组件，提供交互功能（如模态框、轮播等）

内容的提问来源于stack exchange，提问作者Keerthi Reddy Yeruva