移动端 Bootstrap 教程：Runoob 指南教你实现跨设备兼容设计

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">script>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-4">盒子1div>
    <div class="col-12 col-sm-4">盒子2div>
    <div class="col-12 col-sm-4">盒子3div>
  div>
div>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">网站标题a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
    <span class="navbar-toggler-icon">span>
  button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页a>
      li>
      <li class="nav-item">
        <a class="nav-link" href="#">关于我们a>
      li>
      <li class="nav-item">
        <a class="nav-link" href="#">服务项目a>
      li>
    ul>
  div>
nav>

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card">
        <img src="产品图片.jpg" class="card-img-top" alt="产品图">
        <div class="card-body">
          <h5 class="card-title">产品名称h5>
          <p class="card-text">产品描述...p>
        div>
      div>
    div>
    
  div>
div>

<img src="图片地址.jpg" class="img-fluid" alt="响应式图片">

@media (max-width: 767px) {
  .img-mobile {
    content: url(小图片地址.jpg);
  }
}
@media (min-width: 768px) {
  .img-desktop {
    content: url(大图片地址.jpg);
  }
}

<nav class="navbar navbar-light bg-light fixed-bottom">
  <div class="container">
    <a class="navbar-brand" href="#">
      <i class="fas fa-home">i> 首页
    a>
    <a class="navbar-brand" href="#">
      <i class="fas fa-user">i> 我的
    a>
  div>
nav>

<div class="form-group">
  <label for="name">姓名label>
  <input type="text" class="form-control form-control-lg" id="name" placeholder="请输入姓名">
div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="gender" id="male" value="male">
  <label class="form-check-label" for="male">
    男
  label>
div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="gender" id="female" value="female">
  <label class="form-check-label" for="female">
    女
  label>
div>