深入理解bootstrap框架之入门准备

网友投稿 197 2023-07-04


深入理解bootstrap框架之入门准备

一.bootstrap框架简介

Bootstrap是最流行的前端开发框架。

什么是框架:开发过程的半成品。

bootstrap具有以下重要特性:

(1)完整的css样式插件

(2)丰富的预定义样式表

(3)基于jquery的插件集

(4)灵活的栅格系统

二.新手入门

笔者使用版本是3.3.x

在bootstrap中文官网可以找到以下界面

本书采用预编译的版本进行学习

三. 文件结构

生产环境使用bootstrap.min.css和bootstrap.min.js。除了font结构之外,其他文件都可以随意命名。

四. 标准模板

首先是在aptana搭建bootstrap环境。

ctrl+N新建web项目,选择默认项目,命名项目,定义位置,完成。

把下载好的文件夹dist重命名为bootstrap,复制粘贴到项目文件夹下。

注意用顺序,自己的样式和脚本必须在后面。

网上引用cdn是

五. CSS基本语法

1.优先级

和原生CSS一样。

#xxx>.xxx>xxx

2.选择器

(1)属性选择器

(2)子选择器

>号

(3)兄弟选择器

临近选择器用+号表示,比如说在一个nav-ul-li结构的导航条里,欲设置两个li之间的外边距。

nav>li+li{

margin-left:10px;

}

指定元素后边的节点用~。比如说查找article元素内h1后面所有的p元素

article h1~p{font-size:20px}

3. 伪类选择器

bootstrap常用的伪类无外乎这几个

4. display属性

display很好用,但是不能乱用。

5.媒询

媒询是bootstrap响应式布局核心的要素,但主要用到的还是min,max和and

@media(max-width: 767px){

/*在小于768像素的屏幕中,这里样式生效*/

}

@media(max-width: 767px) and (max-width: 991px){

/*在768-991像素区间的屏幕中,这里样式生效*/

}

@media(min-width: 1200px){

/*在大于等于1200像素的屏幕中,这里样式生效*/

}

同理还可以用到高度。

6.相关javaScript语法梳理

(1)与和或运算符(&&,||)

(2)立即调用函数

推荐使用这个

(function(){

do somthing

}() )

表示马上调用。

(3)原型

BT中的js插件,都是基于面向对象的方法创建。

简单举个栗子,定义加减法运算

var decimalDigits = 2,

tax = 5;

function add(x, y) {

return x + y;

}

function subtract(x, y) {

return x - y;

}

//alert(add(1, 3));

改写成一个加减计算函数对象

vxoBZNnM

var Calculator = function (decimalDigits, tax) {

this.decimalDigits = decimalDigits;

this.tax = tax;

};

然后,通过给Calculator对象的prototype属性赋值对象字面量来设定Calculator对象的原型。

Calculator.prototype = {

add: function (x, y) {

return x + y;

},

subtract: function (x, y) {

return x - y;

}

};

//alert((new Calculator()).add(1, 3));

7.jQuery知识梳理

(1)事件绑定

jQuery常用的绑定语法有on/off、bind/unbind。比如说

$('div').on(click,function(){...});

$('div').off(click,function(){...});

注:bind()函数是jQuery 1.7之前或更早版本采用的一个用来绑定事件处理程序的函数;on()函数是jQuery 1.7版本提供的首选的用来绑定事件处理程序的函数;从1.7版本的介绍以及参数描述来看,其实这两个函数基本上用法一致,但可能在早期的版本中,bind()函数一次只能为标签对象绑定一个事件的处理程序,而on()函数则可以一次为多个不同的事件绑定处理程序。

在bootstrap方法中的绑定类似但是思想不同,

$(document).on('click.bs.carosel.data.api','div',function(){...})

利用的是冒泡的机制,选择document的div。提高了性能。

(2)命名空间

调试时,事件后面加上一段字符串比如click.djtao,再用trigger方法触发时,就不会影响原本的点击事件。

(3)$.data()

搜集指定元素上所有以data为前缀的自定义属性,合并为一个字面量。比如说:

我要收集role的值

$('#abc').data('role')

如果不带参数,则等于收集并声明了一个json。var value={role:'aaa',toggle:'toggle',xxx:'djtao'}

8.H5的辅助属性

可以支持盲人等人群阅读。通常以arial为前缀统称arial属性。

以上所述是给大家介绍的深入理解bootstrap框架之入门准备,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:深入理解bootstrap框架之第二章整体架构
下一篇:java Signleton模式详解及示例代码
相关文章

 发表评论

暂时没有评论,来抢沙发吧~