登录  /  注册
首页 > web前端 > js教程 > 正文

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

青灯夜游
发布: 2020-09-16 11:09:20
转载
2022人浏览过
<p>谈谈初学Bootstrap需掌握的知识点

<blockquote><p>教程推荐:bootstrap教程

Bootstrap

<p>Bootstrap中文网:http://www.bootcss.com/

<p>1.什么是 Bootstrap

<p>官方介绍:简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。

<p>2.Bootstrap 下载

<p>Bootstrap3下载地址:http://v3.bootcss.com/getting...

<p>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
登录后复制
<p>4.Bootstrap依赖

<p>要想使用 Bootstrap ,那么必须先引入 jQuery(jquery.min.js)文件。

<p>5.使用 Bootstrap

<p>压缩版本适于实际应用,未压缩版本适于开发调试过程

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

  • <p>使用 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>
登录后复制
<p>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>
登录后复制
<p>Bootstrap 实例精选:http://v3.bootcss.com/getting-started/#examples

<strong>全局 CSS 样式

HTML5 文档类型

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

<!DOCTYPE html>
<html>
  ...
</html>
登录后复制

移动设备优先

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

<meta name="viewport" content="width=device-width, initial-scale=1">
登录后复制
<p>在移动设备浏览器上,可以通过视口 viewport 设置meta属性为user-scalable=no可以禁用其缩放(zooming)功能,这样后用户只能滚动屏幕。(看情况而定)

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

排版与链接

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

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

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

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

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

Normalize.css

<p>为了增强跨浏览器表现的一致性,bootstrap使用了 Normalize.css,这是由 Nicolas GallagherJonathan Neal 维护的一个CSS 重置样式库。

布局容器

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

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

<div class="container">
  ...
</div>
登录后复制
<p>.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

<div class="container-fluid">
  ...
</div>
登录后复制

<strong>栅格系统

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

简介

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

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

  • <p>通过“行(row)”在水平方向创建一组“列(column)”。

  • <p>你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。

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

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

  • <p>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.

  • <p>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.

  • <p>如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。

  • <p>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.

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

媒体查询

<p>在栅格系统中,我们在 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) { ... }
登录后复制
<p>偶尔也会在媒体查询代码中包含 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) { ... }
登录后复制

栅格参数

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


超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)
栅格系统行为总是水平排列开始是堆叠在一起的,当大于这些阈值时将变为水平排列C同左同左
.container 最大宽度None (自动)750px970px1170px
类前缀.col-xs-.col-sm-.col-md-.col-lg-
列(column)数12121212
最大列(column)宽自动~62px~81px~97px
槽(gutter)宽30px (每列左右均有 15px)同左同左同左
可嵌套
偏移(Offsets)
列排序

实例:从堆叠到水平排列

<p>使用单一的一组 .col-md-* 栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列。所有“列(column)必须放在 ” .row 内。

<p>1.jpg

<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>
登录后复制

实例:移动设备和桌面屏幕

<p>是否不希望在小屏幕设备上所有列都堆叠在一起?那就使用针对超小屏幕和中等屏幕设备所定义的类吧,即 .col-xs-*.col-md-*。请看下面的实例,研究一下这些是如何工作的。

<p>2.jpg

<!-- 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>
登录后复制

<strong>排版

标题

<p>HTML 中的所有标题标签, 均可使用。另外,还提供了 .h1.h6 类,为的是给内联(inline)属性的文本赋予标题的样式

<p>3.jpg

<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>
登录后复制
<p>在标题内还可以包含 <small> 标签或赋予 .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>
登录后复制

页面主体

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

中心内容

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

<p class="lead">...</p>
登录后复制

使用 Less 工具构建

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

内联文本元素

标记文本

<p>为了高亮文本,可以使用 <mark> 标签

You can use the mark tag to <mark>highlight</mark> text.
登录后复制

被删除的文本

<p>对于被删除的文本,可以使用 <del> 标签。

<p>4.jpg

<del>This line of text is meant to be treated as deleted text.</del>
登录后复制

无用文本

<p>对于无用文本可以使用 <s> 标签。

<p>5.jpg

<s>This line of text is meant to be treated as no longer accurate.</s>
登录后复制

插入文本

<p>而外插入文本使用 <ins> 标签

<p>6.jpg

<ins>This line of text is meant to be treated as an addition to the document.</ins>
登录后复制

带下划线的文本

<p>为文本添加下划线,使用 <u> 标签。

<p>7.jpg

<u>This line of text will render as underlined</u>
登录后复制

小号文本

<p>使用标签 <small>

着重强调

<p>使用标签 <strong> 标签

斜体

<p>使用 <em> 标签

文本对齐

<p>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>
登录后复制

改变大小写

<p>9.jpg

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
登录后复制

引用

<p>在你的文档中引用其他的来源,可以使用 <blockquote> 来表示引用样式。对于直接引用,建议使用 <p> 标签。

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

列表

无序列表
<p>排列顺序<em>无关紧要的一列元素。

<ul>
  <li>...</li>
</ul>
登录后复制
有序列表
<p>顺序<em>至关重要的一组元素

<ol>
  <li>...</li>
</ol>
登录后复制

代码

内联代码

For example, <code><section></code> should be wrapped as inline.
登录后复制

用户输入

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

<p>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>
登录后复制

代码块

<p>多行代码可以使用 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">登录后复制</div></div> 标签。为了正确的展示代码,注意将尖括号做转义处理。

变量

<p>通过 <var></var> 标签标记变量

程序输出

<p>通过 <samp></samp> 标签来标记程序输出的内容

期待后面的文章!

<p>更多编程相关知识,请访问:编程入门!!

以上就是谈谈初学Bootstrap需掌握的知识点的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号