BootStrap 组件和样式

简介: BootStrap 组件和样式

BootStrap 简介

概念:

课程目标:

  • 响应式布局技术
  • 了解BootStrap前端框架

二.BootStrap

Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap 是一个用于 HTML、CSS 和 JS 开发的开源工具包,来自于Twitter,利用 Bootstrap 提供的 Sass 变量和混合(mixins)、响应式栅格系统、可扩展的预制组件以及强大的 jQuery 插件,能够让你快速地开发出产品原型或构建整个 app。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X2TH0vnA-1589444900650)(E:\政通路\课堂笔记\S2\bootstrap\assets\image-20200514104947017.png)]

2.1 引入文件

bootStrap.min.css

jquery.min.js

bootStrap.min.js

2.2 栅格系统

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mB2xHvew-1589444900655)(E:\政通路\课堂笔记\S2\bootstrap\assets\image-20200514105715506.png)]

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。

我们也可以根据自己的需要,定义列数:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pMmnc2G1-1589444900658)(E:\政通路\课堂笔记\S2\bootstrap\assets\image-20200514105759039.png)]

Bootstrap 4 的网格系统是响应式的,列会根据屏幕大小自动重新排列。

Bootstrap 4 网格系统有以下 5 个类(class):

  • .col- 针对所有设备
  • col-xs 小设备
  • .col-sm 平板 - 屏幕宽度等于或大于 576px
  • .col-md 桌面显示器 - 屏幕宽度等于或大于 768px)
  • .col-lg 大桌面显示器 - 屏幕宽度等于或大于 992px)
  • .col-xl 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

2.2.1网格系统规则

Bootstrap4 网格系统规则:

  • 网格每一行需要放在设置了.container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中,这样就可以自动设置一些外边距与内边距。
  • 使用行样式row来创建水平的列组。
  • 内容需要放置在列中,并且只有列可以是行的直接子节点。
  • 预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。col:column列单词;sm:平板;-4:4个格
    col-sm-n,n(1–12)设置列。
  • 列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
  • 网格列是通过跨越指定的 12 个列来创建。 例如,设置三个相等的列,需要使用用三个.col-sm-4 来设置。
  • Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox(弹性盒子) 而不是浮动。 Flexbox 的一大优势是,没有指定宽度的网格列将自动设置为等宽与等高列

列组合

row/col-md-4 col-md-8等测试

列偏移

col-md-offset-4,原理 margin-left

列嵌套

<div class=‘row’>div代码嵌套代码</div>

列排序

col-md-push-8 推向右侧

2.2.2 CSS全局样式

的一大优势是,没有指定宽度的网格列将自动设置为等宽与等高列

列组合

row/col-md-4 col-md-8等测试

列偏移

col-md-offset-4,原理 margin-left

列嵌套

<div class=‘row’>div代码嵌套代码</div>

列排序

col-md-push-8 推向右侧

2.2.2 CSS全局样式

是CSS最基础、最简单的语法组合而成的,通过这些基础而又核心的布局语法,不需要太多时间就能制作出来比较精美的页面。并且为什么叫它是全局样式,主要是它的使用比较自由,可以在页面中的任意位置使用,也可以放在Bootstrap组件里使用


目录
相关文章
N..
|
26天前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
13 0
|
3月前
|
前端开发
【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
【1月更文挑战第17天】【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
|
6月前
|
前端开发 容器
|
6月前
|
前端开发 容器
|
30天前
|
前端开发
bootstrap组件的案例代码
bootstrap组件的案例代码
9 0
|
30天前
|
前端开发
bootstrap样式代码案例
bootstrap样式代码案例
11 0
|
30天前
|
前端开发
bootstrap组件
bootstrap组件
15 0
|
30天前
|
前端开发 JavaScript 容器
bootstrap样式
bootstrap样式
10 0
|
1月前
|
前端开发
uni-app中基于bootstrap的css样式
uni-app中基于bootstrap的css样式
22 0
|
2月前
Bootstrap5 导航组件和面包屑
Bootstrap5 导航组件和面包屑
17 0