Bootstrap4官方文档 | 新特性入门
发布日期:2021-05-10 06:27:52 浏览次数:4 分类:技术文章

本文共 4761 字,大约阅读时间需要 15 分钟。

阅读目录

在这里插入图片描述

Bootstrap是一个简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。是全球最流行的前端框架,用于构建响应式、移动设备优先的 WEB 站点。

入门Bootstrap4

安装

下载方式引入

  • 方式一: 下载源码文件引入到项目页面
    通过下载 Bootstrap 的 Sass、JavaScript 和文档的源文件,使用你自己的流程工具编译 Bootstrap。
  • 方式二: 预编译的 CSS 和 JS 文件
    下载 Bootstrap v4.5.0 版本的预编译文件,加入到项目中。
  • 方式三: BootstrapCDN
    使用 BootstrapCDN 从而无需下载,将 Bootstrap 的预编译 CSS 和 JS 文件利用缓存加载到项目中。

注意: 编译过的 JavaScript,不要忘记在它之前引入 jQuery 和 Popper.js 的 CDN 版本

软件包管理器

使用一些最受欢迎的软件包管理器,几乎可以将Bootstrap的源文件拖入任何项目中。无论软件包管理器是什么,Bootstrap都将需要Sass编译器和Autoprefixer来进行与我们官方编译版本匹配的设置。

  • npm
    利用 npm 将 Bootstrap 安装到 Node.js 应用程序中:
npm install bootstrap
  • yarn
    利用 yarn 将 Bootstrap 安装到 Node.js 应用程序中:
yarn add bootstrap
  • RubyGems
    将以下代码添加到你的 Gemfile 文件中,然后利用 Bundler (推荐) 和 RubyGems 工具将 Bootstrap 安装到你的 Ruby 应用程序中:
$ gem 'bootstrap', '~> 4.5.0'//不使用 Bundler,你还可以通过以下命令安装 Bootstrap 的 gem:$ gem install bootstrap -v 4.5.0
  • Composer
    你还可以利用 Composer 安装和管理 Bootstrap 的 Sass 和 JavaScript 文件:
composer require twbs/bootstrap:4.5.0
  • NuGet
    如果你是 .NET 开发者,你还可以利用 NuGet 来安装和管理 Bootstrap 的 CSS 或 Sass 和 JavaScript 文件:
Install-Package bootstrapInstall-Package bootstrap.sass

内容

Bootstrap中包含的内容,包括预编译和源代码版本。注意,Bootstrap的JavaScript插件需要jQuery。

预编译的引导程序

下载后,解压缩压缩文件夹,有以下内容:

bootstrap/

├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map

已编译的CSS和JS(bootstrap.),以及已编译和精简的CSS和JS(bootstrap.min.)。

源映射(bootstrap.*.map)可用于某些浏览器的开发人员工具。
捆绑的JS文件(bootstrap.bundle.js最小化bootstrap.bundle.min.js)包括Popper,但不包括jQuery。

CSS文件

css文件包含的内容如下:

在这里插入图片描述

JS文件

在这里插入图片描述

Bootstrap程序源代码

Bootstrap源代码下载包括预编译的CSS和JavaScript资产,以及源Sass,JavaScript和文档。更具体地说,它包括以下内容和更多内容:

bootstrap/

├── dist/
│ ├── css/
│ └── js/
├── site/
│ └──docs/
│ └── 4.5/
│ └── examples/
├── js/
└── scss/

浏览器和设备

支持的浏览器

Bootstrap支持所有主要浏览器和平台的最新,稳定版本。在Windows上,支持Internet Explorer 10-11 / Microsoft Edge。

不明确支持直接或通过平台的Web视图API使用最新版本的WebKit,Blink或Gecko的替代浏览器。但是,Bootstrap应该(在大多数情况下)也可以在这些浏览器中显示并正常运行。下面提供了更具体的支持信息。

https://github.com/browserslist/browserslist#readme

>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30

移动设备

一般来说,Bootstrap支持每个主要平台的默认浏览器的最新版本。

注意:不支持代理浏览器(例如Opera Mini,Opera Mobile的Turbo模式,UC迷你浏览器,Amazon Silk)。详情如下:
在这里插入图片描述

桌面浏览器

同样,支持大多数桌面浏览器的最新版本。详情如下:

在这里插入图片描述

IE浏览器

支持Internet Explorer 10+;IE9和向下不是。

注意: 某些CSS3属性和HTML5元素在IE10中不完全受支持,或者要求使用前缀属性才能具有全部功能。如果需要IE8-9支持,请使用Bootstrap 3。

Javascript

  1. 借助基于jQuery构建的可选JavaScript插件,使Bootstrap栩栩如生

  2. 插件可以单独包含(使用Bootstrap的personal js/dist/.js),也可以同时使用bootstrap.js或缩小的插件bootstrap.min.js(不包括两者)。如果使用捆绑程序(Webpack,汇总…),则可以使用/js/dist/.jsUMD就绪的文件。

  3. 所有插件都依赖于jQuery(这意味着必须在插件文件之前包含jQuery )

禁用数据属性API

禁用数据属性API,需要取消绑定文档命名空间上的所有事件,data-api如下所示:

$(document).off('.data-api')

要定位特定的插件,只需将插件的名称作为名称空间以及data-api命名空间包括在内,如下所示:

$(document).off('.alert.data-api')

事件

Bootstrap为大多数插件的唯一操作提供自定义事件。所有不定式事件均提供preventDefault()功能。这提供了在动作开始之前停止执行的能力。从事件处理程序返回false也会自动调用preventDefault()。

$('#myModal').on('show.bs.modal', function (e) {
if (!data) {
return e.preventDefault() // stops modal from being shown }})

程序化API

通过JavaScript API使用所有Bootstrap插件。所有公共API都是单个可链接的方法,并返回所作用的集合。

$('.btn.danger').button('toggle').addClass('fat')// 所有方法都应接受可选的options对象,以特定方法为目标的字符串或不包含任何内容(以默认行为启动插件):如下$('#myModal').modal() // initialized with defaults$('#myModal').modal({
keyboard: false }) // initialized with no keyboard$('#myModal').modal('show') // initializes and invokes show immediately

每个插件还在Constructor属性上公开其原始构造函数$.fn.popover.Constructor。如果您想获取特定的插件实例,请直接从元素中检索它:$('[rel="popover"]').data('popover')

异步功能和转换

所有编程API方法都是异步的,并且在过渡开始之后但结束之前会返回给调用方。

为了在转换完成后执行操作,您可以收听相应的事件。

$('#myCollapse').on('shown.bs.collapse', function (e) {
// Action to execute once the collapsible area is expanded})

此外,将忽略对过渡组件的方法调用。

$('#myCarousel').on('slid.bs.carousel', function (e) {
$('#myCarousel').carousel('2') // 1完成后将滑向2})$('#myCarousel').carousel('1') // $('#myCarousel').carousel('2') // 被忽视

默认设置

可以通过修改插件的Constructor.Default对象来更改插件的默认设置:

$.fn.modal.Constructor.Default.keyboard = false

主题化

使用新的内置Sass变量自定义Bootstrap 4,以实现全局样式首选项,以方便主题化和组件更改。在Bootstrap 3中,主题化主要由LESS中的变量替代,自定义CSS和我们包含在dist文件中的单独主题样式表驱动。只要付出一些努力,就可以完全重新设计Bootstrap 3的外观,而无需触及核心文件。Bootstrap 4提供了一种熟悉但略有不同的方法。

现在,主题化是通过Sass变量,Sass映射和自定义CSS来完成的。没有更多专用的主题样式表了。相反,我们可以启用内置主题以添加渐变,阴影等。

Sass

利用源Sass文件来利用变量,映射,mixins等。在Bootstrap的构建中,已将Sass舍入精度提高到6(默认为5),以防止浏览器舍入问题。

将bootstrap4主要的了解一下,

转载地址:https://blog.csdn.net/weixin_43853746/article/details/107946439 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Bootstrap4官方文档 | v4核心 -- 组件(一)
下一篇:Vue开发入门(二) | 说说Vue全家桶有哪些~

发表评论

最新留言

哈哈,博客排版真的漂亮呢~
[***.90.31.176]2023年12月07日 02时49分26秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

Springboot+Vue实现在线聊天室项目-推送好友请求消息接口 2019-03-28
Springboot+Vue实现在线聊天室项目-聊天室获取房间信息、分页获取消息的接口 2019-03-28
Springboot+Vue实现在线聊天室项目-主页面及聊天框页面webSocket的消息推送 2019-03-28
Vue聊天室中WebSocket的封装实现不同页面接收相同消息后进行的不同操作 2019-03-28
SpringBoot-WebSocket 使用SimpMessagingTemplate发送后前端无法监听到消息 2019-03-28
Springboot+Vue实现在线聊天室项目-总结反思 2019-03-28
小程序后端D1-服务器验证码生成以及Swagger2接口文档初次使用 2019-03-28
egret踩坑-父组件has-a子组件时子组件调用动画失效 2019-03-28
egret+java小游戏服务端01建立Netty的WebSocket服务 2019-03-28
egret+java小游戏服务端02创建基础pojo类和构建游戏逻辑 2019-03-28
egret+java小游戏服务端03重构pojo类(简单工厂+单一职责接口) 2019-03-28
egret+java小游戏服务端04重构指令解析功能(反射实现开闭原则) 2019-03-28
egret+java小游戏前端05-egret的初步使用 2019-03-28
egret+java小游戏服务端06-重构指令策略(策略模式+装饰者模式) 2019-03-28
Java不同方式实现线程的生产者消费者(synchronized、Lock、BlockingQueue) 2019-03-28
【Codeforces Global Round 13】- C.Pekora and Trampoline - 贪心 2019-03-28
【Codeforces Round #723 (Div. 2)】- C12.Potions - 悔步构造 2019-03-28
【牛客小白月赛34】- E.dd爱旋转 - 群论思想 2019-03-28
【Codeforces Round #723 (Div. 2)】- I Hate 1111 - 数学 2019-03-28
Deepin安装python3 2019-03-28