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

2024-10-01 11:36:48

一.bootstrap框架简介

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

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

bootstrap具有以下重要特性：

（1）完整的CSS样式插件

（2）丰富的预定义样式表

（3）基于jQuery的插件集

（4）灵活的栅格系统

以下将简单介绍对bootstrap可能用到的知识进行梳理。

二.新手入门

笔者使用版本是3.3.x

在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）属性选择器

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

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

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框架之入门准备，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

Bootstrap零基础入门教程(三)

什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 写到这里,这篇从零开始学Bootstrap(3)我想写以下几个内容: 1. 基于我对Bootstrap的理解,做一个小小的总结.
Bootstrap入门书籍之（零）Bootstrap简介

什么是Bootstrap? Bootstrap是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品.Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的. 基于html5.css3的bootstrap,具有下面这些诱人特性: (1)移动设备优先: (2)漂亮的设计: (3)友好的学习曲线: (4
JS表格组件神器bootstrap table详解（基础版）

一.Bootstrap Table的引入关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来. 由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用. 2.使用我们神奇的Nuget 打开Nuget,搜索这两个包 Bootstrap已经是最新的3.3.5了,我们直接安装即可. 而Bootstrap Table的版本竟然是0.4,这也太坑爹了.所以博主建议Boot
Bootstrap每天必学之简单入门

在上一篇文章中主要是简单的介绍了一下Bootstrap,这篇文章进一步了解相关内容,为之后的学习打下基础. 从Visual Studio 2013前不久的更新中看,微软是将Bootstrap3的新版本加入到了VS当中,所以学习Bootstrap3也没什么顾虑了. 一.下载BootStrap 官网的文件很详细简单,对于下载来说也有多种方式.对于我们开发者来说,估计最简单的方式就是直接下载编译和压缩后的CSS.JavaScript文件,另外还包含字体文件,但是不包含文档和源码文件.打开解压包之后可以
Bootstrap入门书籍之（一）排版

推荐阅读:Bootstrap入门书籍之(零)Bootstrap简介 Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落.列表及其他内联元素. 1. 标题在Bootstrap中使用标题的方式和常规html一样:从 <h1> 到 <h6> 分别从大到小安排标题元素,只不过在Bootstrap中重新设置了其默认样式,从源码中可以看到有如下共
BootStrap入门学习第一篇

本文实例为大家分享了BootStrap入门学习的第一篇,供大家参考,具体内容如下 1.环境搭建中文官网下载地址:http://www.bootcss.com/ 右击选中的WEB项目,点击导入,选择文件系统,然后下一步,选择BootStrap文件目录路径,如下: 完成后,WEB项目下的css.img.js就出现相应文件,说明导入成功. 然后导入较新版本的JQuery库,目录结构如下: 至此环境搭建完成. 3.BootStrap基本模板 <!DOCTYPE html> <html lang
如何使用bootstrap框架 bootstrap入门必看!

前言: 前几天,本想做一个登陆界面,但自己写form表单必然很丑,所以想用下bootstarp框架,之前听别人说bootstrap很牛的样子.但我完全不会bootstrap... 下载&目录看bootstrap官网,接着我下载了用于生产环境Bootstrap: 解压出来是这样的: 目录结构大概是这样的,前几天在官网有看到.下面这个目录结构你应该先了解下: bootstrap3 ├── css │├── bootstrap-theme.css //主题类型,生产上一般用不到 │├── boots
Bootstrap入门书籍之（三）栅格系统

实现原理栅格系统是Bootstrap中的核心,正是因为栅格系统的存在,Bootstrap才能有着如此强大的响应式布局方案.下面是官方文档中的解说: Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义classe,还有强大的mixin用于生成更具语义的布局. 我们来理解一下这一段话,可以发现其中最重要的部分就是移动设备优先 ,那么什么是移动设备优先呢? Bootstrap的基础CS
Bootstrap入门书籍之（五）导航条、分页导航

导航条导航条(navbar)和上一节介绍的Bootstrap入门书籍之(四)菜单.按钮及导航.导航(nav),就相差一个字,多了一个"条"字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式.它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式. 基础导航条实际上,导航条和导航在外观上的差别并不是那么的大,但
BootStrap入门教程(一)之可视化布局

下载地址:http://v3.bootcss.com/getting-started/#download HTML模板: <!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引

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

相关推荐

随机推荐