bootstrap

最新推荐文章于 2021-03-09 21:35:50 发布

live23

最新推荐文章于 2021-03-09 21:35:50 发布

阅读量161

点赞数

分类专栏：前段知识文章标签： bootstrap html css

本文链接：https://blog.csdn.net/live23/article/details/111103953

版权

前段知识专栏收录该内容

10 篇文章 0 订阅

订阅专栏

bootstrap简介

1）bootstrap由@mdo 和 @fat 在Twitter工作时创建，Bootstrap使用 LESS CSS 并用 Node 编译，托管在 GitHub 上，方便大家使用这一框架构建更好的web应用。

2）Bootstrap不光为了看起来好看，而且在现代的桌面浏览器上有极佳的表现(包括IE7！)。在平板电脑和智能手机上面还有响应式CSS 可以使用。

3）12列的响应式栅格结构、丰富的组件、JavaScript插件、排版、表单控件，还有基于web的定制工具。

以上是bootstrap官网的介绍。

使用bootstrap时需要先行下载bootstrap，在官网下载即可，下载之前先检查一下是否准备好了一个代码编辑器，你是否已经掌握了足够的HTML和CSS知识以开展工作。这里我们不详述源码文件，但是它们可以随时被下载。在这里我们只着重介绍使用已经编译好的Bootstrap文件进行入门讲解。

在下载的压缩包中你可以看到如下的文件结构和内容。所有文件按逻辑进行分类存储，并且提供了编译和压缩两个版本的文件。

 bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

这就是Bootstrap的基本结构：编译后的文件可以快速应用于任何web项目。我们提供了编译版的CSS和JS文件 (bootstrap.*)，也同时提供了编译并压缩之后的CSS和JS文件 (bootstrap.min.*)。图片文件是使用 ImageOptim 工具进行压缩的，这个工具是Mac平台上用于压缩PNG文件的一个app。

值得注意是，所有的JavaScript插件都依赖jQuery库。

bootstrap包含的东西：

1）文档章节

脚手架

全局性的样式文件，用于重置背景、链接样式、栅格系统等，并包含两个简单的布局结构。

基本CSS样式

常见的HTML元素 -- 如排版、代码、表格、表单、和按钮的样式。还包括 Glyphicons, 一个非常棒的图标集。

组件

常见界面组件 -- 如标签、pill、导航、警告、页面标题的基本样式。

JavaScript插件

和组件类似，这些Javascript插件用来实现提示(tooltip)、弹出框(popover)、模态对话框(modal)等具有交互性的组件。

2）组件列表

组件库 和 JavaScript插件集 一同提供了以下组件元素。

按钮组
按钮下拉菜单
用于导航的标签、pill、列表
导航条
Labels
Badges
Page headers and hero unit
缩略图
警告对话框
进度条
模态对话框(Modals)
下拉菜单(Dropdowns)
Tooltips
Popovers
Accordion
Carousel
Typeahead

在后面的文档中, 我们会挨个详细的介绍这些组件的细节。在此之前, 先来看看如何使用并定制它们。

3）基本的HTML模版

先介绍一个html的简单模板：

一下是一个典型的html文件：

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
  </body>
</html>

为了使其成为一个Bootstrap模板, 需要包含相应的 CSS and JS 文件：

<!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" media="screen">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

加入这两个文件, 我们就可以开始用Bootstrap开发任何网站和应用程序了。

这简单的使用过程也是参照官网，毕竟目前最具权威也最详细的简介就是官方网站给出的信息。

bootstrap使用方法：

1）布局容器

bootstrap为页面内容以及栅格系统包裹了一个.container容器，我们提供了两个类。要注意由于padding的原因，这两种容器不可以互相嵌套。

.container宽度固定支持响应式布局

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

.container-fluid类用于宽度的100%并占据全部视口（view port）的容器。

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

2)栅格系统

Bootstrap默认的栅格系统为12列 ，形成一个940px宽的容器，默认没有启用响应式布局特性。如果加入响应式布局CSS文件，栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下，列将不再固定并且会在垂直方向堆叠。

带有基本栅格的HTML代码

简单的两列式布局，创建一个 .row 容器，并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格，所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

偏移列

把列向右移动可使用 .offset* 类。每个类都给列的左边距增加了指定单位的列。例如，.offset4 将 .span4 右移了4个列的宽度。

<div class="row">
  <div class="span4">...</div>
  <div class="span3 offset2">...</div>
</div>

嵌套列

在默认的栅格系统里, 在已有的.span*内添加一个新的 .row 并加入 .span* 列，就可实现嵌套。被嵌套列中的每列列数总和要等于父级

<div class="row">
  <div class="span9">
    Level 1 column
    <div class="row">
      <div class="span6">Level 2</div>
      <div class="span3">Level 2</div>
    </div>
  </div>
</div>

3）流式栅格系统案例

流式栅格系统对每一列的宽度使用百分比而不是像素数量。它和固定栅格系统一样拥有响应式布局的能力，这就保证它能对不同的分辨率和设备做出适当的调整。

将 .row 替换为 .row-fluid 就能让任何一行“流动”起来。应用于每一列的类不用改变，这样能方便的在流式与固定栅格之间切换。

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

流式栅格的偏移

定义方式和固定网格系统相同：给任何想偏移的列添加 .offset* 即可。

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span4 offset2">...</div>
</div>

流式嵌套布局

与固定栅格的嵌套有一点不同：被嵌套的列数之和要等于12。这是因为流式栅格使用百分比来设置每列的宽度。

<div class="row-fluid">
  <div class="span12">
    Fluid 12
    <div class="row-fluid">
      <div class="span6">
        Fluid 6
        <div class="row-fluid">
          <div class="span6">Fluid 6</div>
          <div class="span6">Fluid 6</div>
        </div>
      </div>
      <div class="span6">Fluid 6</div>
    </div>
  </div>
</div>