简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首页
文章
问答
课程
专题
下载
手游
词典
最近更新

首页  >  文章  >  web前端  >  谈谈初学Bootstrap需掌握的知识点

谈谈初学Bootstrap需掌握的知识点

青灯夜游
青灯夜游转载
2020-09-16 11:09:202259浏览

谈谈初学Bootstrap需掌握的知识点

教程推荐：bootstrap教程

Bootstrap

Bootstrap中文网：http://www.bootcss.com/

1.什么是 Bootstrap ？

官方介绍：简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

2.Bootstrap 下载

Bootstrap3下载地址：http://v3.bootcss.com/getting...

3.Bootstrap 文件目录结构

dist
    -css
        -bootstrap.css
        -bootstrap.css.map
        -bootstrap.min.css（常用）
        -bootstrap-theme.css
        -bootstrap-theme.css.map
        -bootstrap-theme.min.css
    -fonts
        -glyphicons-halflings-regular.eot
        -glyphicons-halflings-regular.svg
        -glyphicons-halflings-regular.ttf
        -glyphicons-halflings-regular.woff
    -js
        -bootstrap.js
        -bootstrap.min.js（常用）
        -npm.js

4.Bootstrap依赖

要想使用 Bootstrap ，那么必须先引入 jQuery（jquery.min.js）文件。

5.使用 Bootstrap

压缩版本适于实际应用，未压缩版本适于开发调试过程

  • 直接引用官网下载下来的文件。

  • 使用 Bootstrap 中文网提供的免费 CDN 服务。

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

6.Bootstrap 基本模板

<!DOCTYPE html>
<html>
  <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 基本模板</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn&#39;t work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap&#39;s JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Bootstrap 实例精选：http://v3.bootcss.com/getting-started/#examples

全局 CSS 样式

HTML5 文档类型

Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。

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

移动设备优先

在 bootstrap3 中移动设备优先考虑的。为了保证适当的绘制和触屏缩放，需要在93f0f5c25f18dab9d176bd4f6de5d30e之中添加 viewport 元数据标签。

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

在移动设备浏览器上，可以通过视口 viewport 设置meta属性为user-scalable=no可以禁用其缩放（zooming）功能，这样后用户只能滚动屏幕。（看情况而定）

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scala=1, user-scalable=no">

排版与链接

Bootstrap 排版、链接样式设置了基本的全局样式。分别是：

  • 为 body 元素设置 background-color: #fff;

  • 使用 @font-family-base、@font-size-base 和 @line-height-base a变量作为排版的基本参数

  • 为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线

这些样式都能在 scaffolding.less 文件中找到对应的源码。

Normalize.css

为了增强跨浏览器表现的一致性，bootstrap使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。Bootstrap提供了两个作此用处的类。注意，由于 padding等属性的原因，这两种容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

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

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

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

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

简介

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

  • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

  • 通过“行（row）”在水平方向创建一组“列（column）”。

  • 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

  • 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

  • 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

  • The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.

  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.

  • 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

通过研究后面的实例，可以将这些原理应用到你的代码中。

媒体查询

在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。


 超小屏幕 手机 (b368264664988efde0d3f53c62b1afcc 标签或赋予 .small 类的元素，可以用来标记副标题。
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 元素和所有段落元素。另外， （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

中心内容

通过添加 .lead 类可以让段落突出显示。

<p class="lead">...</p>

使用 Less 工具构建

variables.less 文件中定义的两个 Less 变量决定了排版尺寸：@font-size-base 和 @line-height-base。第一个变量定义了全局 font-size 基准，第二个变量是 line-height 基准。我们使用这些变量和一些简单的公式计算出其它所有页面元素的 margin、 padding 和 line-height。自定义这些变量即可改变 Bootstrap 的默认样式

内联文本元素

标记文本

为了高亮文本，可以使用 f920514e6447cf1d171079d1371f007f 标签

You can use the mark tag to <mark>highlight</mark> text.

被删除的文本

对于被删除的文本，可以使用 823db3943044a0a9a620ada8d4b1d965 标签。

4.jpg

<del>This line of text is meant to be treated as deleted text.</del>

无用文本

对于无用文本可以使用 2e44d2d3284d23d932e1fd85f3d4cf3a 标签。

5.jpg

<s>This line of text is meant to be treated as no longer accurate.</s>

插入文本

而外插入文本使用 426be984ffbbb815d7d88e3543a85d91 标签

6.jpg

<ins>This line of text is meant to be treated as an addition to the document.</ins>

带下划线的文本

为文本添加下划线，使用 88f336217b3880082bb52d49b5de60a5 标签。

7.jpg

<u>This line of text will render as underlined</u>

小号文本

使用标签 d015d241ae6d34c34210679b5204fe85

着重强调

使用标签 8e99a69fbe029cd4e2b854e244eab143 标签

斜体

使用 907fae80ddef53131f3292ee4f81644b 标签

文本对齐

8.jpg

<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="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

改变大小写

9.jpg

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

引用

在你的文档中引用其他的来源，可以使用 b8a712a75cab9a5aded02f74998372b4 来表示引用样式。对于直接引用，建议使用 e388a4556c0f65e1904146cc1a846bee 标签。

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

列表

无序列表

排列顺序无关紧要的一列元素。

<ul>
  <li>...</li>
</ul>
有序列表

顺序至关重要的一组元素

<ol>
  <li>...</li>
</ol>

代码

内联代码

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

用户输入

通过 kbd 标签标记用户通过键盘输入的内容。

10.jpg

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

代码块

多行代码可以使用 e03b848252eb9375d56be284e690e873 标签。为了正确的展示代码，注意将尖括号做转义处理。

变量

通过 b7f90f73cad438258bf67e62f79b2113 标签标记变量

程序输出

通过 162cd570ab1483e383d78dcb7f452f7c 标签来标记程序输出的内容

期待后面的文章！

更多编程相关知识，请访问：编程入门！！

以上是谈谈初学Bootstrap需掌握的知识点的详细内容。更多信息请关注PHP中文网其他相关文章！

html5 jquery css bootstrap less html if for 堆 class var JS number 外边距 margin padding viewport background column http
声明：
本文转载于：segmentfault.com。如有侵权，请联系admin@php.cn删除
上一篇：使用Node.js+Chrome+Puppeteer实现网站的爬取下一篇：最完整指南 JavaScript 的错误处理

相关文章

查看更多