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组件里使用

BootStrap 组件和样式相关推荐

ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件
Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉菜单.导航.警告框.弹出框.输入框组等.在你的Web Application中使用这些组件,将为用户提供一致和简单易用的用户体验. ...
Bootstrap 组件 Button 按钮
按钮使用Bootstrap 的自定义按钮样式对于一些行动在表单中,对话框,和更多支持的多种大小.状态还有更多. 例子 Bootstrap包含几个预定义的按钮样式,每个样式都有自己的语义目的,还添加 ...
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）
阅读目录七.多值输入组件manifest 1.效果展示 2.源码说明 3.代码示例八.文本框搜索组件bootstrap-typeahead 1.效果展示 2.源码说明 3.代码示例九.boots ...
Bootstrap组件福利篇：十二款好用的组件推荐
阅读目录一.时间组件 1.效果展示 2.源码说明 3.代码示例二.自增器组件 1.效果展示 2.源码说明 3.代码示例三.加载效果一.实用型二.炫酷型四.流程图小插件 1.效果展示 2.源 ...
Bootstrap 组件
2.Bootstrap 组件 Bootstrap组件是Bootstrap框架的核心之一.可以利用Bootstrap组件构建出绚丽的页面常用的组件:Icon图标(Glyphicon).下拉菜单(Dro ...
[译] JavaScript 中的 CSS：基于组件的样式的未来
本文讲的是[译] JavaScript 中的 CSS:基于组件的样式的未来, 原文地址:CSS in JavaScript: The future of component-based styling ...
对 Accordion 组件使用样式
对 Accordion 组件使用样式您可以设置样式属性,以便更改 Accordion 组件的边框和背景的外观. Accordion 组件使用下列样式: 样式主题说明 themeColor 光晕 ...
vue中私有样式(scoped)中修改其他组件的样式
1.使用">>>"符号更改其他组件的样式例如 <style lang="stylus" scoped> .a >>& ...
根据条件动态修改element 组件深层次样式
开发前提: vue elementUI 在开发中有时候 element 中我们使用的某个组件的样式不符合我们的需求,直接写行内样式,有时候会发现并不会生效,直接将样式写在 style 标签中虽然样式会 ...

BootStrap 组件和样式

BootStrap 简介

二.BootStrap

2.1 引入文件

2.2 栅格系统

2.2.1网格系统规则

2.2.2 CSS全局样式

2.2.2 CSS全局样式

BootStrap 组件和样式相关推荐

最新文章

热门文章