suchen

Heim  >  Artikel  >  Web-Frontend  >  Lassen Sie uns über die Wissenspunkte sprechen, die Anfänger mit Bootstrap beherrschen müssen

Lassen Sie uns über die Wissenspunkte sprechen, die Anfänger mit Bootstrap beherrschen müssen

青灯夜游
青灯夜游nach vorne
2020-09-16 11:09:202276Durchsuche

Lassen Sie uns über die Wissenspunkte sprechen, die Anfänger mit Bootstrap beherrschen müssen

Tutorial-Empfehlung: Bootstrap-Tutorial

Bootstrap

Bootstrap Chinesische Website: http://www.bootcss.com/

1 Was ist Bootstrap? 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 中移动设备优先考虑的。为了保证适当的绘制和触屏缩放，需要在之中添加 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 栅格系统的工作原理：

@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) { ... }
🎜6.Bootstrap Basisvorlage🎜
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>
🎜Bootstrap-Beispielauswahl: http://v3.bootcss.com/getting-started/#examples🎜🎜

Globale CSS-Stile🎜

HTML5 Dokumenttyp

🎜Einige von Bootstrap verwendete HTML-Elemente und CSS-Eigenschaften erfordern, dass die Seite auf den HTML5-Dokumenttyp eingestellt ist. 🎜
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Mobile First

🎜Mobile First in Bootstrap3. Um eine ordnungsgemäße Zeichnung und Touch-Skalierung sicherzustellen, muss das Metadaten-Tag viewport zu hinzugefügt werden. 🎜
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
🎜In Browsern für mobile Geräte können Sie die Zoomfunktion deaktivieren, indem Sie das Metaattribut des Ansichtsfensters auf user-scalable=no setzen, sodass der Benutzer nur auf dem Bildschirm scrollen kann. (Das hängt von der Situation ab) 🎜
<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>

Schriftsatz und Verknüpfung

🎜Bootstrap-Schriftsatz und Link-Stile legen grundlegende globale Stile fest. Sie sind: 🎜

Das obige ist der detaillierte Inhalt vonLassen Sie uns über die Wissenspunkte sprechen, die Anfänger mit Bootstrap beherrschen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 jquery css bootstrap less html if for 堆 class var JS number 外边距 margin padding viewport background column http
Stellungnahme：
Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Verwenden Sie Node.js+Chrome+Puppeteer, um die Website zu crawlenNächster Artikel：Verwenden Sie Node.js+Chrome+Puppeteer, um die Website zu crawlen

In Verbindung stehende Artikel

Mehr sehen