Bootstrap

Bootstrap教程

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

适合人员

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

学习提醒

在开始执行本教程之前，我们假设您已经了解了HTML和CSS的基础知识。如果您不清楚这些概念，我们将建议您浏览我们的HTML教程和CSS教程的简短教程。

在线执行Bootstrap

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

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

<!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>