英文链接源链接 [13186]
contenteditable="true"

Bootstrap - Home 介绍

Twitter Bootstrap是最近最流行的前端框架。它时尚,直观,功能强大的移动第一前端框架,可以更快,更轻松地进行Web开发。它使用HTML,CSS和Javascript。本教程将教您Bootstrap Framework的基础知识,您可以使用它们轻松地创建Web项目。本教程分为多个部分,例如Bootstrap基本结构,Bootstrap CSS,Bootstrap布局组件和Bootstrap插件。这些部分中的每一个都包含相关主题以及简单而有用的示例。

为什么要学习Bootstrap?

  • 移动优先方式-引导程序3,框架由整个库中的移动优先样式组成,而不是在单独的文件中。

  • 浏览器支持-所有流行的浏览器均支持。

Popular Browser
  • 易于入门-只需具备HTML和CSS的知识,任何人都可以使用Bootstrap入门。另外,Bootstrap官方网站也提供了很好的文档。

  • 自适应设计-Bootstrap的自适应CSS可以适应台式机,平板电脑和手机。有关响应式设计的更多信息,请参见引导响应式设计。

Responsive Design
  • 提供了一个干净统一的解决方案,用于为开发人员构建界面。

  • 它包含易于定制的美观实用的内置组件。

  • 它还提供基于Web的自定义。

  • 最重要的是,它是开源的。

Hello World使用Bootstrap。

只是为了给您带来一些关于Bootstrap的兴奋,我将为您提供一个小的常规Bootstrap Hello World程序,您可以使用Demo链接进行尝试。

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

引导程序的应用

  • 脚手架-Bootstrap提供了具有网格系统,链接样式和背景的基本结构。 Bootstrap基本结构 部分对此进行了详细介绍。

  • CSS -Bootstrap具有全局CSS设置,通过可扩展类设置样式和增强的基本HTML元素以及高级网格系统的功能。 使用CSS引导程序中将对此进行详细介绍。

  • 组件-Bootstrap包含十几个可重用的组件,这些组件旨在提供图标,下拉菜单,导航,警报,弹出窗口等。 布局组件 部分对此进行了详细介绍。

  • JavaScript插件-Bootstrap包含十几个自定义jQuery插件。您可以轻松地将它们全部或一一包含。 Bootstrap插件部分中对此进行了详细介绍。

  • 自定义-您可以自定义Bootstrap的组件,LESS变量和jQuery插件以获得自己的版本。

听众

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

先决条件

在开始进行本教程之前,我们假设您已经了解HTML和CSS的基础知识。如果您不太了解这些概念,那么我们建议您阅读有关HTML教程和CSS教程的简短教程。

点我分享笔记