深入理解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,复制粘贴到项目文件夹下。
bootstrap基础模板
五. CSS基本语法1.优先级和原生CSS一样。 #xxx>.xxx>xxx 2.选择器(1)属性选择器 (2)子选择器 >号 (3)兄弟选择器 临近选择器用+号表示,比如说在一个nav-ul-li结构的导航条里,欲设置两个li之间的外边距。 li+li{
margin-left:10px;
}
指定元素后边的节点用~。比如说查找article元素内h1后面所有的p元素 3. 伪类选择器bootstrap常用的伪类无外乎这几个 4. display属性display很好用,但是不能乱用。 5.媒询媒询是bootstrap响应式布局核心的要素,但主要用到的还是min,max和and 同理还可以用到高度。 6.相关JavaScript语法梳理(1)与和或运算符(&&,||) (2)立即调用函数 推荐使用这个 表示马上调用。 (3)原型 BT中的js插件,都是基于面向对象的方法创建。 简单举个栗子,定义加减法运算 改写成一个加减计算函数对象 然后,通过给Calculator对象的prototype属性赋值对象字面量来设定Calculator对象的原型。 7.jQuery知识梳理(1)事件绑定 jQuery常用的绑定语法有on/off、bind/unbind。比如说 注:bind()函数是jQuery 1.7之前或更早版本采用的一个用来绑定事件处理程序的函数;on()函数是jQuery 1.7版本提供的首选的用来绑定事件处理程序的函数;从1.7版本的介绍以及参数描述来看,其实这两个函数基本上用法一致,但可能在早期的版本中,bind()函数一次只能为标签对象绑定一个事件的处理程序,而on()函数则可以一次为多个不同的事件绑定处理程序。 在bootstrap方法中的绑定类似但是思想不同, 利用的是冒泡的机制,选择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框架之入门准备。编程之家 52php.cn 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |