教程

优质

小牛编辑

133浏览

2023-12-01

Twitter Bootstrap是最近最流行的前端框架。它是时尚，直观且功能强大的移动第一前端框架，可实现更快速，更轻松的Web开发。它使用HTML，CSS和Javascript。本教程将向您介绍Bootstrap Framework的基础知识，您可以使用它轻松创建Web项目。本教程分为Bootstrap Basic Structure，Bootstrap CSS，Bootstrap Layout Components和Bootstrap Plugins等部分。这些部分中的每一部分都包含相关主题和简单实用的示例。

听众 (Audience)

本教程是为具有HTML和CSS基础知识且有开发网站需求的人准备的。完成本教程后，您将发现自己具有使用Twitter Bootstrap开发Web项目的中等专业水平。

先决条件 (Prerequisites)

在开始继续本教程之前，我们假设您已经了解HTML和CSS的基础知识。如果您不太了解这些概念，我们建议您阅读我们关于HTML Tutorial和CSS Tutorial的简短教程。

Execute Bootstrap Online

您不需要拥有自己的环境来开始学习Bootstrap编程！我们为您设置了一个在线编译器，可用于在线编译和执行程序。

对于本教程中提供的大多数示例，您将在代码框的右上角找到“试用”选项。使用它来验证程序并使用不同的选项检查结果。随意修改任何示例并在线执行。

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <meta http-equiv = "X-UA-Compatible" content = "IE = edge">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bootstrap 101 Template</title>
      <!-- Bootstrap -->
      <link href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel = "stylesheet">
      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <h1>Hello, world!</h1>
      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
   </body>
</html>