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


Posted in Javascript onOctober 09, 2016

一.bootstrap框架简介

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

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

bootstrap具有以下重要特性:

(1)完整的CSS样式插件

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

(3)基于jQuery的插件集

(4)灵活的栅格系统

以下将简单介绍对bootstrap可能用到的知识进行梳理。
深入理解bootstrap框架之入门准备

二.新手入门

笔者使用版本是3.3.x

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

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

三. 文件结构

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

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

四. 标准模板

首先是在aptana搭建bootstrap环境。

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

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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<!--页面编码 -->
<meta charset="UTF-8">
<!--低版本浏览器模拟渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--响应式布局:UI布局和移动设备一致,缩放大小为原始大小-->
<!--也可以使用下列声明:
<meta name="viewport" content="width=device-width, initialscale=
1, maximumscale=1, user-scalable=no">
意思是强制让文档宽度和设备宽度保持1:1,不允许用户单击放大浏览。注意content属性要用逗号(或分号)隔开,不规范则失效 -->
<meta name="viewport" content="width=deviece-width,initial-scale=1">
<!--支持国产浏览器的高速渲染-->
<meta name="renderer" content="Webkit">
<!--在此进行SEO设置:作者、关键词、描述-->
<meta name="author" content="djtao">
<meta name="keywords" content="djtao">
<meta name="description" content="djtao">
<title>bootstrap基础模板</title>
<!--bootstrap-->
<!--以下两个js插件用于在IE8及以下支持H5元素查询的,如不用可移除 -->
<!--[if lt IE 9]>
<script src="scripts/html5.min.js"></script>
<script src="scripts/respond.min.js"></script>
<![endif]-->
<!--bootstrap样式文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<!--自定义样式文件 -->
<link rel="stylesheet" href="styles/css.css">
</head>
<body>
<!--基于jQuery的脚本文件 -->
<script src="scripts/jquery.min.js"></script>
<!-- bootstrap的jq插件 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!--自定义脚本文件 -->
<script src="scripts/js.js"></script>
</body>
</html>

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

网上引用cdn是

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

五. CSS基本语法

1.优先级

和原生CSS一样。

#xxx>.xxx>xxx

2.选择器

(1)属性选择器

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

(2)子选择器

>号

(3)兄弟选择器

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

nav>li+li{
margin-left:10px;
}

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

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

3. 伪类选择器

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

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

4. display属性

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

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

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));

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

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为前缀的自定义属性,合并为一个字面量。比如说:

<div id="abc" data-role="aaa" data-toggle="toggle" data-xxx="djtao"></div>

我要收集role的值

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

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

8.H5的辅助属性

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

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

Javascript 相关文章推荐
javascript实现轮显新闻标题链接
Aug 13 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 Javascript
使用vue构建一个上传图片表单
Jul 04 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
vue2过滤器模糊查询方法
Sep 16 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 Javascript
js实现盒子滚动动画效果
Aug 09 Javascript
微信小程序 http请求详细介绍
Oct 09 #Javascript
微信小程序 Flex布局详解
Oct 09 #Javascript
JavaScript实现Java中Map容器的方法
Oct 09 #Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 #Javascript
JS中this上下文对象使用方式
Oct 09 #Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 #Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 #Javascript
You might like
神族 PROTOSS 概述
2020/03/14 星际争霸
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
php数组键名技巧小结
2015/02/17 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
python client使用http post 到server端的代码
2013/02/10 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
python 绘制国旗的示例
2020/09/27 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
英国手机零售商:Metrofone
2019/03/18 全球购物
新闻记者实习自我鉴定
2013/09/19 职场文书
写好自荐信的几个要点
2013/12/26 职场文书
创业女性典型材料
2014/05/02 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
寻找成龙观后感
2015/06/12 职场文书
Python采集股票数据并制作可视化柱状图
2022/04/04 Python