📌  相关文章
📜  使用 Bootstrap 3 考虑以下代码 (1)

📅  最后修改于: 2023-12-03 15:22:09.809000             🧑  作者: Mango

使用 Bootstrap 3

Bootstrap是Twitter开发的一款前端框架，基于HTML、CSS和JavaScript，用于快速、灵活地构建Web应用。Bootstrap 3是Bootstrap的第三个主要版本，于2013年8月发布。

特点
  • 响应式设计：根据屏幕大小调整网页布局，适配不同设备。
  • 移动设备优先：先设计适配移动设备的布局，再逐步优化PC端的布局。
  • CSS3和HTML5：使用最新的CSS3和HTML5技术，提供更好的效果和用户体验。
  • 自定义组件：提供多种风格各异的组件，还能通过自定义CSS和JavaScript扩展功能。
应用

使用Bootstrap 3构建Web应用非常简单，只需引入相应的CSS和JavaScript文件即可。以下是一个基本的HTML模板：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bootstrap 3 Template</title>
    <!-- 引入Bootstrap 3的CSS文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <h1>Hello, Bootstrap 3!</h1>
    </div>
    <!-- 引入jQuery和Bootstrap 3的JavaScript文件 -->
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

在页面中添加相应的HTML元素即可使用Bootstrap 3的组件和样式，比如添加一个导航条：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
总结

Bootstrap 3是一款强大、易用的前端框架，能够快速构建出漂亮、易用的Web应用。无论是基础还是高级功能，都提供了丰富的组件和样式，非常适合Web开发人员使用。