您的位置：首页 > 运维架构 > 网站架构

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

2017-03-06 00:00 295 查看
简单介绍:

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"
>

<!-- 默认文档宽度与设备宽度保持1:1 -->

<
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"
>

<!-- 以下2个插件使IE8支持HTML5元素和媒体查询 -->

<!--[if lt IE 9]>

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

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

<![endif]-->

</
head
>

<
body
>

 
7fe0
;   
<!-- 如果使用Bootstrap的JS插件则必须引入JQuery -->

<
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
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航