BootStrap简介

时间 2019-11-18

原文原文链接

简介

在您开始阅读本教程以前，您必须具有 HTML 、 CSS 和 JavaScript 的基础知识。若是您还不了解这些概念，那么建议您先阅读咱们的这些教程:css

Bootstrap 包的内容

基本结构：Bootstrap 提供了一个带有网格系统、连接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
CSS：Bootstrap 自带如下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件：Bootstrap 包含了十几个可重用的组件，用于建立图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您能够直接包含全部的插件，也能够逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
定制：您能够定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来获得您本身的版本。html

HTML 模板

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
      <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 若是经过 file://  引入 Respond.js 文件，则该文件没法起效果 -->
      <!--[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 (Bootstrap 的 JavaScript 插件须要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括全部已编译的插件 -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

　　在这里，您能够看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，用于让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。html5

Bootstrap CSS 概览

在这一章中，咱们将讲解 Bootstrap 底层结构的关键部分，包括咱们让 web 开发变得更好、更快、更强壮的最佳实践。jquery

HTML 5 文档类型（Doctype）

Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工做，您须要使用 HTML5 文档类型（Doctype）。所以，请在使用 Bootstrap 项目的开头包含下面的代码段。web

<!DOCTYPE html>
<html>
....
</html>

若是在 Bootstrap 建立的网页开头不使用 HTML5 的文档类型（Doctype），您可能会面临一些浏览器显示不一致的问题，甚至可能面临一些特定情境下的不一致，以至于您的代码不能经过 W3C 标准的验证。bootstrap

移动设备优先

移动设备优先是 Bootstrap 3 的最显著的变化。api

在以前的 Bootstrap 版本中（直到 2.x），您须要手动引用另外一个 CSS，才能让整个项目友好的支持移动设备。浏览器

如今不同了，Bootstrap 3 默认的 CSS 自己就对移动设备友好支持。工具

Bootstrap 3 的设计目标是移动设备优先，而后才是桌面设备。这其实是一个很是及时的转变，由于如今愈来愈多的用户使用移动设备。布局

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，须要在网页的 head 之中添加 viewport meta 标签，以下所示：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

容器（Container）

<div class="container">
  ...
</div>

对齐类

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

强调类

这些用去强调的工具类经过颜色来表示强调。

<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

行内列表

<ul class="inline">
<li>...</li>
</ul>

标题

HTML中定义的全部标题标签, 从<h1> 到 <h6> 都是可用的。

加粗

用增长font-weight值的方式加粗强调一段文本。

斜体

用斜体字强调一段文本。

<em>rendered as italicized text</em>

1. Bootstrap 简介
2. Bootstrap简介
3. BootStrap复习之BootStrap简介
4. Bootstrap简要介绍
5. 【Bootstrap Learning】-1-简介
6. BootStrap学习简介
7. Bootstrap自学1----简介
8. bootstrap-tagsinput的使用简介
9. bootstrap的简单介绍
10. Bootstrap框架的简介
更多相关文章...
• Scala 简介 - Scala教程
• AJAX 简介 - PHP教程
• Github 简明教程
• Java Agent入门实战（一）-Instrumentation介绍与使用