网站前端_Bootstrap模版标准/样式标准/脚本标准入门

weixin_33804582

于 2017-03-06 16:06:00 发布

阅读量88

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript python ViewUI

原文链接：https://my.oschina.net/learnbo/blog/852725

本文介绍了Bootstrap框架的基本使用方法，包括模版标准、样式标准和脚本标准等内容，并详细解释了如何利用Bootstrap提高网页开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

简单介绍:

1. Bootstrap于2010年Twitter开源将常见的CSS布局小组件和JS插件进行了封装,大大规范且提高了代码质量及开发效率.

2. Bootstrap包含完整的基础CSS插件,丰富的预定义样式表,基于jQuery的JS插件集,非常灵活的响应式删栏系统,支持跨平台,且完全支持自定义.

注意: Bootstrap的所有JS插件都依赖jQuery库,所以要确保在使用这些功能的时候引用相应的jQuery文件

模版标准:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!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.0">

<meta name="description" content="">

<meta name="keywords" content="">

<title>Bootstrap</title>

<link rel="stylesheet" href="css/bootstrap.css">

<!--[if lt IE 9]>

<script src="js/html5shiv.min.js"></script>

<script src="js/respond.min.js"></script>

<![endif]-->

</head>

<body>

<script src="js/jquery.min.js"></script>

<script src="js/bootstrap.js"></script>

</body>

</html>

样式标准:

说明: Bootstrap的CSS核心就是选择器的定义以及各自优先级上的处理,CSS优先级引入组合概念(a, b, c, d),a表示style属性,优先级最高,由于一般都是class样式,所以该值一般都是0,b表示该选择器上id数量的总和,一般都是1个,c表示该选择器上其它的属性CSS选择器以及伪类选择器的总数,d表示元素和伪元素选择器个数,所以#menu h2就是0101, h2.title就是0011,h2+p就是0002,所以#leftbar li#first就比#leftbar li:first-child的优先级高因为前者是0201后者是0102,所以前者优先级高.

脚本标准:

1

2

3

+function($){

// Javascript Code

}(jQuery);

说明: 如上自执行函数,在执行时传入jQuery对象,这样做i的好处在于函数内部$已经是局部变量,不再受外部作用域影响,前面的+号和;号功能一样,都是为了防止代码压缩时由于不规范而出错

1

2

3

Alert.prototype.show = function (e){

// Javascript Code

};

说明: 如上原型对象,就是在Alert函数上定义一个名为show的原型方法,调用时只需要在其实例上调用原型上的show方法即可

1

2

3

$(document).on('mouseover.bs.stress', 'tr:not(:first)', function(event) {

// JavaScript Code

});

说明: 如上事件绑定,支持以事件命名空间的方式在事件后加点自定义事件处理函数,常规绑定事件会触发mouseover所有绑定的回调,而以命名空间的形式可以确保只触发自定义的事件.

1	`<select` `id="area"` `data-role="area"` `data-toggle="toggle"` `role="combobox"></select>`

说明: 如上辅助设计,支持很多自定义属性,如data-*开头,还有一个role支持如上不同类别,不同设备会对此角色做不同的反应.

1

2

3

4

5

6

7

+function($){

console.log($("#area").data("role"))

var $data = $("#area").data();

for(var key in $data){

console.log(key, $data[key])

};

}(jQuery)

说明: $(selector).data([field])会自动搜集指定元素上以data-开头的自定义HTML5属性,

登录乐搏学院官网http://www.learnbo.com/

或关注我们的官方微博微信，还有更多惊喜哦~

本文出自 “满满李 - 运维开发之路” 博客，请务必保留此出处http://xmdevops.blog.51cto.com/11144840/1880956

转载于:https://my.oschina.net/learnbo/blog/852725

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。