0. 前言

  • 官方有 中文文档，写得十分详细
  • 我这里只是把公开课上提到的尽可能地列举一遍，列举的资料也源自 中文官网

1. 基本模板

  • 这就是一个最简单的 Bootstrap 页面，记为 code1
<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- 下载后可以换成相对路径 -->

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->

    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->

    <!--[if lt IE 9]>

      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <h1>你好，世界！</h1> <!-- 字体做了一定的美化 -->

    <!-- (1) 下文的代码，写在此处 -->

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

  </body>

</html>

2. 布局容器

  • 代码写在 code1 的 (1) 处

2.1 container

  • 默认居中
  • 有固定的宽度
  • 支持响应式布局
<div class="container" style="height:100px;background:red">

      container

</div>

2.2 container-fluid

  • 宽度为 100%
  • 占据全部视口(viewport)
<div class="container-fluid" style="height:100px;background:green">

      container-fluid

</div>

3. 栅格系统

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

3.1 简介

  • 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

3.2 栅格参数

  • 通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的
超小屏幕
手机 (<768px)		 小屏幕
平板 (≥768px)		 中等屏幕
桌面显示器 (≥992px)		 大屏幕
大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的，
大于阈值时将变为水平排列C
.container
最大宽度		 None （自动） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
column
列数		 12
最大列宽 自动 ~62px ~81px ~97px
gutter
槽宽		 30px
（每列左右均有 15px）
可嵌套 是
Offsets
偏移		 是
列排序 是

3.3 实例：从堆叠到水平排列

  • 使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列
  • 所有“列(column)必须放在 ” .row 内
  • 下表是为了模拟排列情况；因为 col-md-1 有些长，所以我用 cm-1 作了代替
从堆叠到水平排列
cm-1 cm-1 cm-1 cm-1 cm-1 cm-1 cm-1 cm-1 cm-1 cm-1 cm-1 cm-1
col-md-8 col-md-4
col-md-4 col-md-4 col-md-4
col-md-6 col-md-6
  • 举例：下面是三列布局的一种
<div class="container-fluid">

    <div class="row">

        <div class="col-md-3 col-xs-1 col-sm-6" style="background:coral">col-md-3</div>

        <div class="col-md-6 col-xs-1 col-sm-3" style="background:rosybrown">col-md-6</div>

        <div class="col-md-3 col-xs-1 col-sm-3" style="background:dimgray">col-md-3</div>

    </div>

</div>

2.4 移动设备和桌面屏幕

  • 屏幕会根据实际大小显示设定的大小
  • 可以在调整浏览器大小查看效果

2.5 列偏移

  • 少废话，上例子
<div class="container-fluid">

    <div class="row">

        <div class="col-md-4 col-md-offset-2" style="background:#659">col-md-4</div>

        <div class="col-md-4" style="background:red">col-md-4</div>

        <div class="col-md-4" style="background:pink">col-md-4</div>

    </div>

</div>

2.6 嵌套列

  • 少废话，上例子
<div class="container-fluid">

    <div class="row">

        <div class="col-md-6" style="background:red;height:40px">

            <div class="row">

                <div class="col-md-6" style="background:blue;height:20px"></div>

            </div>

        </div>

    <div class="col-md-6" style="background:pink;height:40px"></div>

    </div>

</div>

2.7 其他

  • 一行排列
  • 列排序
  • 等

4. 响应式工具

  • 为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容；另外还包含了针对打印机显示或隐藏内容的工具类
  • 有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本；相反，通过使用这些工具类可以在不同设备上提供不同的展现形式

4.1 可用的类

  • 通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容
超小屏幕手机
(<768px)		 小屏幕平板
(≥768px)		 中等屏幕桌面
(≥992px)		 大屏幕桌面
(≥1200px)
.visible-xs-* 可见 隐藏 隐藏 隐藏
.visible-sm-* 隐藏 可见 隐藏 隐藏
.visible-md-* 隐藏 隐藏 可见 隐藏
.visible-lg-* 隐藏 隐藏 隐藏 可见
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏
  • 从 v3.2.0 版本起，形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，列表如下：
类组 CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;
  • 因此，以超小屏幕（xs）为例，可用的 .visible-*-* 类是：.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block
  • .visible-xs、.visible-sm、.visible-md 和 .visible-lg 类也同时存在；但是从 v3.2.0 版本开始不再建议使用；除了 <table> 相关的元素的特殊情况外，它们与 .visible-*-block 大体相同

5. 排版

5.1 标题

  • HTML 中的所有标题标签，<h1> 到 <h6> 均可使用
  • 另外，还提供了 .h1 到 .h6 类，为的是给内联(inline)属性的文本赋予标题的样式
  • 在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题
  • 少废话，上例子
<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 class="h1 text-center">h1. Bootstrap <small>heading</small></p>

<p class="h2">h2. Bootstrap heading</p>

<p class="h3">h3. Bootstrap heading</p>

<p class="h4">h4. Bootstrap heading</p>

<p class="h5">h5. Bootstrap heading</p>

<p class="h6">h6. Bootstrap heading</p>

5.2 其他

  • 内联文本元素
  • 对齐
  • 改变大小写
  • 缩略语
  • 地址
  • 引用
  • 列表
  • 等

6. 表格

6.1 基本实例

  • 为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线
  • 这种方式看起来很多余！？但是官方觉得，表格元素使用的很广泛，如果他们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以他们选择将此样式独立出来

6.2 举例

<!--

    table-striped   条纹状表格

    table-bordered  带边框的表格

    table-hover     鼠标悬停

    table-condensed 紧缩表格

-->

<table class="table table-striped table-bordered table-hover table-condensed">

    <tr>

        <td>序号</td>

        <td>姓名</td>

        <td>性别</td>

    </tr>

    <tr>

        <td>1</td>

        <td>zhangsan</td>

        <td>nan</td>

    </tr>

    <tr>

        <td>2</td>

        <td>Lisi</td>

        <td>nan</td>

    </tr>

    <tr>

        <td>3</td>

        <td>Wangwu</td>

        <td>nan</td>

    </tr>

</table>

6.3 其他

  • 条纹状表格
  • 带边框的表格
  • 紧缩表格
  • 状态类
  • 响应式表格

7. 表单

7.1 基本实例

  • 单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;
  • 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列
  • 少废话，上例子
<input type="text" class="form-control">

7.2 其他

  • 内联表单
  • 水平排列的表单
  • 下拉列表(select)
  • 静态控件
  • 焦点状态
  • 禁用状态
  • 只读状态
  • 校验状态
  • 等

[Web 前端] 031 bootstrap 的使用和全局 css 样式的更多相关文章

  1. 响应式布局和BootStrap 全局CSS样式

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  2. 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  3. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

  4. 范仁义web前端介绍课程---4、html、css、js初体验

    范仁义web前端介绍课程---4.html.css.js初体验 一.总结 一句话总结: html:就是网站的骨架,比如div标签.a标签等 css:style标签或者style属性里面的就是css j ...

  5. 26-[Boostrap]-全局css样式，组件，控件

    1.全局CSS样式 https://v3.bootcss.com/css/ <!DOCTYPE html> <html lang="zh-CN"> < ...

  6. 【03】全局 CSS 样式

    全局 CSS 样式 设置全局 CSS 样式:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果:还有先进的栅格系统. 概览 深入了解 Bootstrap 底层结构的关键部分,包括我们 ...

  7. Boostrap全局CSS样式

    1.Bootstrap提供的CSS Reset * { box-sizing: border-box; } body { font ...; color: #333; background: ...; ...

  8. 学习笔记1－－响应式网页＋Bootstrap起步＋全局CSS样式

    一.学习之前要了解一些背景知识: 在2g时代,3g时代,4g时代,早期的网页浏览设备,功能机,智能机.(本人最喜欢的透明肌,和古典黑莓机) 1.什么是响应式网页? Responsive Web Pag ...

  9. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

随机推荐

  1. DevExpress WPF v19.1新版亮点：Gantt/Map控件新功能

    行业领先的.NET界面控件DevExpress 日前正式发布v19.1版本,本站将以连载的形式介绍各版本新增内容.在本系列文章中将为大家介绍DevExpress WPFv19.1中新增的一些控件及部分 ...

  2. webpack 搭建React（手动搭建）

    前言 最近真的都是在瞎学,看到自己不是很明白的东西,都喜欢自己手动去敲1到3遍(晚上下班的时候咯), 瞧,React  基于webpack 搭建,react 官方有一套手脚架工具,我自己也搭建过确实挺 ...

  3. 微信小程序模板消息后端代码

    利用spring 事件发送模板消息 1.定义事件 import com.ruoyi.project.salerauth.domain.TemplateMessage; import org.sprin ...

  4. 记第一次正式线上笔试（Tencent——正式考-技术研发类-综合-2018实习生招聘）

    选择题做的跟傻逼一样,不多说了..大学只打了ACM还不是计算机科班出身的我,连好多名词都不认识..... 三道编程题很简单,下面给出三道题的大致题意以及题解. 1.给出n和m,满足(2m)可以整除n. ...

  5. electron-vue 更新 使用electron-update的版本

    electron-vue使用的electron版本比较老,用最新的electron-update会报错 我用这个版本成功 "electron-updater": "^3. ...

  6. CentOS8 中文输入法

    CentOS8发布了,安装了下试试,结果发现中文输入法调不出来. 系统安装完成后,在系统[设置]的[Region&Language]里的[输入源]里可以添加汉语输入源,但是不能打中文字. 下面 ...

  7. csp-s2019 AFO记

    DAY 0 上午出发前大家都很颓废的样子. 我因为还没有实现刷完NOIP专题的所有题的目标而去憨比的学DDP. 最后还是不会,保卫王国是写不成了…… 该走了,学校领导来开了个欢送会,祝福我们从里WA到 ...

  8. 如何查看运行的docker container 的 执行 docker run的命令

    前言 就是我备份了一下 mysql_container, 然后我想启用 新的备份的mysql_container 但是之前的docker run image xxxxxx这些都已经忘记了 我想找一下之 ...

  9. c#翻页效果

    用c#和GDI+实现杂志翻页动画效果时间:2010-01-13 blog.csdn.net 周公 - 说明:以前本人参与个一个电子杂志项目,当时要求实现模拟现实生活中的杂志翻页动画效果,别人推荐了这篇 ...

  10. （77）一文了解Redis

    为什么我们做分布式使用Redis? 绝大部分写业务的程序员,在实际开发中使用 Redis 的时候,只会 Set Value 和 Get Value 两个操作,对 Redis 整体缺乏一个认知.这里对  ...