深入理解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 相关文章推荐
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
分享javascript计算时间差的示例代码
Mar 19 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 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
杏林同学录(六)
2006/10/09 PHP
PHP中的CMS的涵义
2007/03/11 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
浅析Yii2缓存的使用
2016/05/10 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
js计数器代码
2006/11/04 Javascript
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
在windows系统中实现python3安装lxml
2016/03/23 Python
python操作oracle的完整教程分享
2018/01/30 Python
Python如何对齐字符串
2020/07/30 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
电大自我鉴定范文
2013/10/01 职场文书
怎样写好自荐信和推荐信
2013/12/26 职场文书
红领巾心向党广播稿
2014/01/19 职场文书
计算机毕业生自荐信
2014/06/12 职场文书
办护照工作证明
2014/10/01 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
社区结对共建协议书
2016/03/23 职场文书