当前位置:首页 > 网站模板 > 正文内容

bootstrap基础教程第二版源代码(bootstrap案例源码)

网站模板2年前 (2023-01-20)849

本篇文章给大家谈谈bootstrap基础教程第二版源代码,以及bootstrap案例源码对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

本文目录一览:

如何搭建bootstrap配置环境

文件结构

预编译的 Bootstrap

当您下载了 Bootstrap 的已编译的版本,解压缩 ZIP 文件,您将看到下面的文件/目录结构:

如上图所示,可以看到已编译的 CSS 和 JS(bootstrap.*),以及已编译压缩的 CSS 和 JS(bootstrap.min.*)。同时也包含了 Glyphicons 的字体,这是一个可选的 Bootstrap 主题。

Bootstrap 源代码

如果您下载了 Bootstrap 源代码,那么文件结构将如下所示:

less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。

dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。

docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。

HTML 模板

一个使用了 Bootstrap 的基本的 HTML 模板如下所示:

!DOCTYPE html

html

head

titleBootstrap 模板/title

meta name="viewport" content="width=device-width, initial-scale=1.0"

!-- 引入 Bootstrap --

link href="" rel="stylesheet"

!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 --

!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 --

!--[if lt IE 9]

script src=""/script

script src=""/script

![endif]--

/head

body

h1Hello, world!/h1

!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --

script src=""/script

!-- 包括所有已编译的插件 --

script src="js/bootstrap.min.js"/script

/body

/html

在这里,您可以看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件,用于让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。

有关上面代码段中每个元素的细节将在 Bootstrap CSS 概览 章节详细讲解。

实例

现在让我们尝试使用Bootstrap输出"Hello, world!":

!DOCTYPE html

html

head

title在线尝试 Bootstrap 实例/title

link href="" rel="stylesheet"

script src=""/script

script src=""/script

/head

body

h1Hello, world!/h1

/body

/html

尝试一下 »

Bootstrap CDN推荐

本站实例采用的是百度的静态资源库()上的Bootstrap资源。

百度的静态资源库的 CDN 服务,访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费,引入代码如下:

!-- 新 Bootstrap 核心 CSS 文件 --

link href="" rel="stylesheet"

!-- 可选的Bootstrap主题文件(一般不使用) --

script src=""/script

!-- jQuery文件。务必在bootstrap.min.js 之前引入 --

script src=""/script

!-- 最新的 Bootstrap 核心 JavaScript 文件 --

script src=""/script

bootstrap 源码怎么用

1、Bootstrap的作用域

2、Bootstrap的类定义

3、Bootstrap的插件定义

4、Bootstrap的事件代理

5、Bootstrap的对象数据缓存

6、Bootstrap的防冲突

7、作用域外如何使用Button类

8、Bootstrap的单元测试

Bootstrap的作用域

Bootstrap每个插件都定义在下面这段作用域代码中:

Js代码

+function ($) {

...

}(window.jQuery)

请看《IIFE》和《严格模式》编译环境。

在插件的作用域之外,全局范围执行代码的第一行,检测了jQuery是否定义。在Grunt的concat任务中,合并所有插件时,检测代码添加在目标文件的banner说明后面。Grunt.js的相关代码:

Js代码

jqueryCheck: 'if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery") }\n\n',

concat: {

options: {

banner: '%= banner %%= jqueryCheck %',

stripBanners: false

},

bootstrap: {

src: [

'js/transition.js',

'js/alert.js',

'js/button.js',

'js/carousel.js',

'js/collapse.js',

'js/dropdown.js',

'js/modal.js',

'js/tooltip.js',

'js/popover.js',

'js/scrollspy.js',

'js/tab.js',

'js/affix.js'

],

dest: 'dist/js/%= pkg.name %.js'

}

}

Bootstrap的类定义

Js代码

var Button = function (element, options) {

this.$element = $(element)

this.options = $.extend({}, Button.DEFAULTS, options)

}

Button.DEFAULTS = {

loadingText: 'loading...'

}

Button.prototype.setState = function (state) {

...

}

Button.prototype.toggle = function () {

...

}

Bootstrap采用这种类定义方式的好处,以及Javascript其他几种类定义的方式,请参照《Javascript面向对象编程(一):封装》

Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。这意味着,我们可以把那些不变的属性和方法,直接定义在prototype对象上。在Button函数体内部定义的属性和方法可以看做是类的私有属性和方法, 为Button.prototype对象定义的属性和方法都可以看做是类的公共属性和方法。这个类封装了插件对象初始化所需的方法和属性。

Bootstrap的插件定义

请参看《jQuery插件开发快速入门》,注意两个this指向的是不同对象

Js代码

$.fn.button = function (option) {

return this.each(function () {

var $this = $(this)

...

})

}

Bootstrap的事件代理

Bootstrap Button插件定义最后一部分,事件绑定是这么写的

Java代码

$(document).on('click.bs.button.data-api', '[data-toggle^=button]', function (e) {

...

})

这段JavaScript代码将click委托事件监听器绑定在document元素上,并给click事件赋予命名空间click.bs.button.data-api,选择器匹配的是属性data-toggle的值为"button"开头的标签。

关于jQuery将事件绑定在document文档对象上的好处,就是js事件代理的优点,性能上做了一个测试比较。

关于jQuery命名空间的好处,请参看《jQuery .on() and .off() 命名空间》

Bootstrap的防止冲突

jQuery是全局对象,所以jQuery的插件定义$.fn.button并不受作用域限制。如果在别的插件中同样定义了button插件,后加载的button插件将会覆盖先加载的button插件,jsbin示例:

Js代码

// Old button

+function($){

$.fn.button = function() {

alert('Old button')

}

}(window.jQuery)

// Bootstrap button

+function($){

$.fn.button = function() {

alert('Bootstrap button')

}

}(window.jQuery)

$('a').button() // alert('Bootstrap button')

Bootstrap做了插件冲突处理,jsbin示例:

Js代码

// Old button

+function($) {

$.fn.button = function() {

alert('Old button')

}

}(window.jQuery)

// Bootstrap button

+function($){

// 将原先的button插件对象赋值给一个临时变量old

var old = $.fn.button

$.fn.button = function() {

alert('Bootstrap button')

}

// 执行该函数,恢复原先的button定义,并返回Bootstrap定义的button插件

$.fn.button.noConflict = function () {

$.fn.button = old

return this

}

}(window.jQuery)

// span style="font-family: Helvetica, Tahoma, Arial, sans-serif; white-space: normal; background-color: #ffffff;"作用域/span外我们可以灵活使用两个button插件

$.fn.button = $.fn.button.noConflict()

$('a').button() // alert('Bootstrap button')

$.fn.button.noConflict()

$('a').button() // alert('Old button')

Bootstrap作用域外如何使用Button类

Js代码

$.fn.button.Constructor = Button

在Bootstrap的button插件中还有上面者句代码,去掉它不影响插件的正确执行。

它很像javascript中类构造器:

Java代码

var Cat = function(name) {

this.name = name

}

var cat1 = new Cat('Hello Kitty')

var cat2 = new Cat('Doramon')

cat1.constructor == Cat.prototype.constructor

但是Javascript是区分大小写的,也就是 这里大写开头的的Constructor 和 Javascript小写开头的constructor 没有任何关系。

查找jQuery源码中也没有对于大写开头的Constructor的定义。所以这里的Constructor只是一个普通属性,我们也可以写成其他名字 $.fn.button.Something = Button,Bootstrap为了指明这个属性的意义而命名为构造器“Constructor”更合理。

这样一来,这段代码就很好理解了:$.fn.button.Constructor = Button 通过将作用域内的Button类赋值给jQuery的button对象的Constructor属性,在IIFE作用域外也可以使用Button类。调用方式:

Js代码

+function($){

// 类定义

var Button = function() {}

// 插件定义

$.fn.button = function() {

alert('Bootstrap button')

}

// 类赋值到jQuery button对象的Constructor属性

$.fn.button.Constructor = Button

}(window.jQuery)

var Button = $.fn.button.Constructor

Bootstrap的对象数据缓存

Js代码

// 获取存储的Button对象,如果是第一次执行变量data的值为undefined

var data = $this.data('bs.button')

var options = typeof option == 'object' option

// 创建Button对象: new Button(this, options),

// 并赋值给变量data: data = new Button(this, options)

// 存储在元素的jQuery对象上的‘bs.button’数据字段 $this.data('bs.button', data)

if (!data) $this.data('bs.button', (data = new Button(this, options)))

// data是一个Button对象,可以调用Button的原生方法

if (option == 'toggle') data.toggle()

else if (option) data.setState(option)

利用jQuery的 .data(key, value)存储Button对象

如何编译bootstrap-4.0.0源码

因为bootstrap 4.0.0将放弃less转用sass来处理css,所以开发环境需要装SASS插件(必须先安装Ruby)。

安装Ruby,略。

安装SASS

gem install sass

安装Node.js,略。

安装grunt

npm install -g grunt

安装node-sass,大多数环境正常。安装不成功的话可以看后面的手动编译css部分。

npm install -g node-sass

grunt打包,加强制参数

grunt --force

在dist目录下编译出下列文件

|-- dist

|-- css

|-- bootstrap.css

|-- bootstrap.css.map

|-- bootstrap.min.css

|-- bootstrap.min.css.map

|-- js

|-- bootstrap.js

|-- bootstrap.min.js

|-- npm.js

|-- umd

|-- alert.js

|-- button.js

|-- carousel.js

|-- collapse.js

|-- dropdown.js

|-- modal.js

|-- popover.js

|-- scrollspy.js

|-- tab.js

|-- tooltip.js

|-- util.js

scsslint检查时可能会报错,可以将bundleExcc关掉,不用本地的

//You can choose to have your gems installed via bundler and if so, set this option to true to use the local gems.

scsslint: {

options: {

bundleExec: false,

config: 'scss/.scss-lint.yml',

reporterOutput: null

},

src: ['scss/*.scss', '!scss/_normalize.scss']

}

手动编译css,进入scss目录会看到大量的scss文件。主要关注下面几个

|-- scss

|-- ...

|-- bootstrap.scss

|-- bootstrap-flex.scss

|-- bootstrap-grid.scss

|-- bootstrap-reboot.scss

|-- ...

可以用sass命令直接生成相应的css文件和map文件

sass bootstrap.scss bootstrap.css

sass bootstrap-flex.scss bootstrap-flex.css

sass bootstrap-grid.scss bootstrap-grid.css

sass bootstrap-reboot.scss bootstrap-reboot.css

Pandora Bootstrap源码分析

在我的认知里,是没有办法改变当前的classloder的,当前的 SpringApplication.run的时候,肯定是系统的classloder啊,就让我们来揭开迷雾吧。

参数mainClass就是HSFProviderApplication这个有main方法的入口类

参数args就是main方法的参数

参数的classLoader是我们自己创建的classloader

由于我们创建的classloder是系统classloder的子类,我们就可以做文章了,中间件的类用新创建的classloder来加载,业务的类用系统的classloder来加载。是不是非常巧妙啊。

如何保证不会执行多次加载逻辑,甚至死循环的呢?第一遍是系统的classloder,第二遍虽然看上去是我们自己创建的classloder,但我们我们创建的classloder是委托给系统的classloder的,所以其实还是相同的classloder。这就很简单了,PandoraBootstrap执行第一遍之后就改一个bool变量,第二遍读到这个变量改了就直接跳过了。

bootstrap基础教程第二版源代码的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于bootstrap案例源码、bootstrap基础教程第二版源代码的信息别忘了在本站进行查找喔。

扫描二维码推送至手机访问。

版权声明:本文由我的模板布,如需转载请注明出处。


本文链接:http://60200875.com/post/1485.html

分享给朋友:

“bootstrap基础教程第二版源代码(bootstrap案例源码)” 的相关文章

二维码素材模板动漫(二维码动漫背景图片)

二维码素材模板动漫(二维码动漫背景图片)

今天给各位分享二维码素材模板动漫的知识,其中也会对二维码动漫背景图片进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、可画怎么美化二维码 2、笔刷二维码怎么...

文字logo设计说明模板(文字logo设计说明模板100字)

文字logo设计说明模板(文字logo设计说明模板100字)

本篇文章给大家谈谈文字logo设计说明模板,以及文字logo设计说明模板100字对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、怎样的logo设计,才算的上是完美的设计呢?...

年终总结ppt模板简约模板(PPT年终总结模板)

年终总结ppt模板简约模板(PPT年终总结模板)

今天给各位分享年终总结ppt模板简约模板的知识,其中也会对PPT年终总结模板进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、季度工作总结ppt模板(5篇)...

饭店开业宣传单模板免费(餐饮店开业宣传单模板)

饭店开业宣传单模板免费(餐饮店开业宣传单模板)

今天给各位分享饭店开业宣传单模板免费的知识,其中也会对餐饮店开业宣传单模板进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、饭店开业宣传语大全 2、急求饭店...

小米商城导航栏的代码(小米页面代码)

小米商城导航栏的代码(小米页面代码)

今天给各位分享小米商城导航栏的代码的知识,其中也会对小米页面代码进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、小米手机能设置导航栏黑边马 2、小米强制手...

贴纸素材免抠png(免扣贴纸素材可爱)

贴纸素材免抠png(免扣贴纸素材可爱)

本篇文章给大家谈谈贴纸素材免抠png,以及免扣贴纸素材可爱对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、有没有抠好的透明图片PNG素材库,PNG素材去哪下载? 2、千...