网站前端_Bootstrap.基础入门.0001.模版标准/样式标准/脚本标准入门?

发布时间:2020-05-24 04:30:51 作者:运维开发
来源:网络 阅读:737

简单介绍:


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

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


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


模版标准:


<!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>
        <!-- 如果使用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 h3就是0101, h3.title就是0011,h3+p就是0002,所以#leftbar li#first就比#leftbar li:first-child的优先级高因为前者是0201后者是0102,所以前者优先级高.


脚本标准:


+function($){
    // Javascript Code
}(jQuery);

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


Alert.prototype.show = function (e){
    // Javascript Code
};

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


$(document).on('mouseover.bs.stress', 'tr:not(:first)', function(event) {
    // JavaScript Code
});

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


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

网站前端_Bootstrap.基础入门.0001.模版标准/样式标准/脚本标准入门?


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


+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属性,


推荐阅读:
  1. Bootstrap+jQuery+Thinkphp+Mongodb实战开发社区交流网站平台
  2. Oracle DMP备份文件导入(impdp)导出(expdp)方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

bootstrap 网站前端 准入

上一篇:WPF:Slider样式

下一篇:Powershell 管理应用系列(Part1 )

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》