[Bootstrap]7天深入Bootstrap(1)入门准备

由于申请了一个域名，一个云主机，开始弄个人网站。

发现Bootstrap非常方便，和重要，故开始学习与分享关于Bootstrap的技术。

推个广告

个人网站：http://www.51pansou.com

BootStrap视频下载：Bootstrap视频

BootStrap源码下载：Bootstrap源码

本节目录：

简介
入门
基本模板
CSS基本语法
JS基本语法
扩展

简介

Bootstrap是目前最流行的前端开发框架，由Twitter的两位前员工Mark Otto和Jacob Thornton在2010年8月份创建。它是一套基于Less的前端开发库（最新版也包含了Sass源码），提供了很多常见并常用的各种CSS和JavaScript合集，以便开发人员随时上手。

Bootstrap提供了如下重要的特性：

一套完整的基础CSS插件。
丰富的预定义样式表。
一组基于jQuery的JS插件集。
一个非常灵活的响应式（Responsive）栅格系统，并且崇尚移动先行（Mobile First）的思想。

从V3.1.0开始，Bootstrap的License授权改成了MIT协议。 MIT是目前最为宽松的协议，大家可以放心地在各种商业环境中使用它。

入门

cdn：

<linkrel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<linkrel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<scriptsrc="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<scriptsrc="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Bootstrap框架的文件和源码可以在其官方网站（www.getbootstrap.com）下载。点击链接可以看到3个下载链接

下载Bootstrap，下载的内容是编译后可以直接使用。包括未经压缩的文件和经过压缩处理的文件。

下载源码，是用于编译CSS的Less源码，以及各个插件的JS源码。

下载Sass项目，是用于编译CSS的Sass源码，以及各个插件的JS源码。

文件结构

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/├── glyphicons-halflings-regular.eot├── glyphicons-halflings-regular.svg├── glyphicons-halflings-regular.ttf├── glyphicons-halflings-regular.woff└── glyphicons-halflings-regular.woff2

3.X版和2.X系列版本有一个很大区别，就是2.x系列版本用于展示icon小图标的.png图片不见了，取而代之的是fonts目录的4种类型的字体文件。我们称这种方式为@font-face版本的icon实现，该字体来自glyphicons.com网站，并得到免费授权。通过这种技术显示图标的好处是，图标可以被任意缩放、改变颜色。

对文件的css、js文件夹名称进行随意重命名，但是不能对fonts文件夹进行重命名，因为CSS 文件里的源码使用了相对路径（../fonts/）

注意bs的所有js插件都是基于jQuery的，要确保在使用这些功能的时候引用相应的jQuery文件。

基本模板

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]><script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--></head><body><h1>你好，世界！</h1><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="js/bootstrap.min.js"></script></body>
</html>

由上述模板代码可以看出，3.x和2.x版本相比，有一个很大的区别，就是多了以下一行代码：

<meta name="viewport" content="width=device-width, initial-scale=1">

这就是我们前面提到的，Bootstrap从3.0版本开始全面支持移动平台了，并将贯彻移动先行（Mobile First）的宗旨。

上述代码的意思是，默认情况下，UI布局的宽度和移动设备的宽度一致，缩放大小为原始大小。

CSS基本语法

Bootstrap的CSS组件的核心就是选择器的定义以及在各自优先级上的处理。

如何确定CSS的优先级？

这里我们要先引入一个机制，分别用4个数字（a，b，c，d）表示优先级组合.

第一个数字（a）表示style属性，优先级最高。由于一般都是class样式，所以该值一般都是0。

第二个数字（b）是该CSS选择器上的id数量的总和，一般都是1个。

第三个数字（c）是用在该CSS选择器上的其他属性CSS选择器以及伪类的总和。这里包括class（.btn）和属性CSS选择器（比如li[id=red]）。

第四个数字（d）计算元素（就像table、p、div等）和伪元素（就像first-child等）。

选择器

这里简单介绍2个常用的：

子选择器：

element element	div p	选择 <div> 元素内部的所有 <p> 元素。	1
element>element	div>p	选择父元素为 <div> 元素的所有 <p> 元素。

兄弟选择器：

element+element	div+p	选择紧接在 <div> 元素之后的所有 <p> 元素。
element1~element2	p~ul	选择前面有 <p> 元素的每个 <ul> 元素。

扩展：

div,p表示多个选择器同时被选择

伪类用于向某些选择器添加特殊的效果。如a:hover a:link

媒体查询

媒体查询是进行响应式设计的核心要素，其功能非常强大。

Bootstrap主要用到min-width、max-width，以及and语法，用于在不同的分辨率下设置不同的CSS样式。

@media (max-width:767px) {

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

}

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

/*在768和991像素之间的屏幕里,这里的样式才生效*/

}

@media (min-width:992px) and (max-width:1199px) {

/*在992和1199像素之间的屏幕里,这里的样式才生效*/

}

@media (min-width:1200px) {

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

}

JS基本语法

||与&& 2个运算符

||表示，如果第一个元素可以转换为true，则返回第一个元素的值，否则查询第二个元素的值

&&则相反，如果第一个元素可以转换为false，才返回第一个元素的值，否则返回第二个元素的值

空对象null，undefined为false

数字零为false

空字符串为false

自执行函数

(function() { /* code */} ()); // 推荐使用这个

(function() { /* code */})(); // 这个也是可以用的

+function() { /* code */}(); //前面的+号主要是防止不符合规定的代码

;function() { /* code */}(); //+号也可以换成;

原型

在Alert函数上定义一个名为close的原型方法。

1	`Alert.prototype.close =function` `(e) {` `/.../` `}`

什么是原型，原型的好处，可以看我的博客js篇。

这里演示如何调用原型方法

1 2	`varalert =` `newAlert();` `alert.close();`

jQuery

绑定事件

1 2	`$('td').on("click",function` `(e) {//todo}); //在td上绑定click` `$('td).off('click');` `// 在td上禁用click事件`

而在bs中

1 2	`$(document).on('click.bs.carousel.data-api','td',function(e){};` `$(document).off('.carousel.data-api');`

上述的on在使用时，中间多了一个参数，而且选择器变成了 document。它的好处是只在document上绑定一个单击事件，利用冒泡的机制，在单击的时候检查是否是td元素，如果是才处理。而前面我们把td作为选择器的时候，一个页面有多少td元素就会绑定多少个click事件，这样性能会大大降低。这种3个参数的模式称为享元模式。

$(selector).data()

收集指定元素上的所有以data-开头的自定义属性，并合并成为一个对象字面量。

1	`<divid="abc" data-role="aaa" data-toggle="toggle"></div>`

如果要获取data-role里aaa这个值

1	`$("'#abc").data("role");`

扩展

Less是一种CSS预处理技术，它是一种动态样式语言，属于 CSS预处理语言中的一种。

HTML5辅助设计

在bs中，出现了不是以data-开头的自定义属性，我们称之为辅助属性。

这些属性是HTML5新提出的概念，用于支持残障人士、老年人、文化水平不高或暂时患病的人使用屏幕阅读器进行页面访问。

aria-hidden="true"表示对屏幕阅读器隐藏该div 元素

role="navigation"表示该区域用于导航

个人网站：http://www.51pansou.com

BootStrap视频下载：Bootstrap视频

BootStrap源码下载：Bootstrap源码

转载人:www.51pansou.com

转载于:https://www.cnblogs.com/51pansou/p/5179800.html

[Bootstrap]7天深入Bootstrap(1)入门准备相关推荐

Bootstrap学习笔记01【快速入门、栅格布局】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
Bootstrap 一篇就够快速入门使用（中文文档）
目录一.Bootstrap 简介什么是 Bootstrap? 历史为什么使用 Bootstrap? Bootstrap 包的内容在线实例 Bootstrap 实例更多实例 Bootstrap ...
bootstrap 精美_基于Bootstrap 4和Vuejs构建的精美资源
bootstrap 精美 Vue Light Bootstrap仪表板 (Vue Light Bootstrap Dashboard) Vue Light Bootstrap Dashboard is ...
bootstrap 选项卡_使Bootstrap选项卡与砌体一起玩
bootstrap 选项卡 Bootstrap is one of the most widely adopted, open-source, front-end frameworks. Includ ...
bootstrap自动生成html,Bootstrap框架动态生成Web页面文章内目录的方法
引言在写博客的时候,为了条理性起见,经常会使用许多小标题,当文章长时,需要来回在不同的标题之间穿梭,如果手动添加目录,添加锚点,实在是麻烦,为此,可以动态生成一块目录区域,并使用Bootstrap提供 ...
Bootstrap简介、下载bootstrap及引入文件说明、响应式容器和满屏容器、栅格系统
Bootstrap简介: Bootstrap是Twitter(推特)开发的,目前最受欢迎的前端开源框架,基于jQuery用于开发HTML.CSS.JavaScript,简洁灵活,常用于开发响应式布局及 ...
Bootstrap学习-详解Bootstrap下拉菜单组件
转载:https://www.cnblogs.com/jnslove/p/5421187.html bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,他对应的文件: less 对 ...
bootstrap：初次使用bootstrap框架
bootstrap: 初次使用bootstrap框架 bootstrap官网:https://v3.bootcss.com/ jQuery官网:https://jquery.com/ 使用流程: 1. ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：禁用按钮
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...
Bootstrap table方法，Bootstrap table事件，配置
调用 BootStrap Table 方法的语法: $('#table').bootstrapTable('method', parameter); 例如: $('#my_table').bootst ...

[Bootstrap]7天深入Bootstrap(1)入门准备

[Bootstrap]7天深入Bootstrap(1)入门准备相关推荐

最新文章

热门文章