[Bootstrap]7天深入Bootstrap(1)入门准备
由于申请了一个域名，一个云主机，开始弄个人网站。
发现Bootstrap非常方便，和重要，故开始学习与分享关于Bootstrap的技术。
推个广告
个人网站：http://www.neverc.cn
signalR做的一个讨论圈非常方便公司交流，哈哈！http://group
本节目录：
简介
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：
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//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的原型方法。
Alert.prototype.close = function (e) { /*...*/ }
什么是原型，原型的好处，可以看我的博客js篇。
这里演示如何调用原型方法
var alert = new Alert();
alert.close();
jQuery
绑定事件
$('td').on("click", function (e) {//todo}); //在td上绑定click
$('td).off('click'); // 在td上禁用click事件
而在bs中
$(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-开头的自定义属性，并合并成为一个对象字面量。
<div id="abc" data-role="aaa" data-toggle="toggle"></div>
如果要获取data-role里aaa这个值
$("'#abc").data("role");
扩展
Less是一种CSS预处理技术，它是一种动态样式语言，属于 CSS预处理语言中的一种。
HTML5辅助设计
在bs中，出现了不是以data-开头的 自定义属性，我们称之为辅助属性。
这些属性是HTML5新提出的概念，用于支持残障人士、老年人、文化水平不高或暂时患病的 人使用屏幕阅读器进行页面访问。
aria-hidden="true"表示对屏幕阅读器隐藏该div 元素
role="navigation"表示该区域用于导航
[Bootstrap]7天深入Bootstrap(1)入门准备的更多相关文章
- 【Bootstrap】1.初识Bootstrap
作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好.扩浏览器的解决方案. 1.下载Bootstrap 打开官方网址 http://getbootstrap.com/ 进 ...
- 最近在学习bootstrap的时候用bootstrap的视频教程2.0的引用bootstrap3.0突然发现很多不同，总结了一下
bootstrap 2.3版与3.0版重要类的改变对比 Bootstrap 2.x Bootstrap 3.0 .container-fluid .container .row-fluid .row ...
- [Bootstrap]7天深入Bootstrap(5)JavaScript插件
在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab). ...
- [Bootstrap]7天深入Bootstrap(4)CSS组件
Bootstrap框架的三大核心之二:组件. 组件也是最核心的地方,因为绝大部分的网页都必须利用组件才能构建出绚丽的页面. 组件包括:Icon图标(Glyphicon). 下拉菜单(Dropdown) ...
- [Bootstrap]7天深入Bootstrap(3)CSS布局
Bootstrap三大核心内容的基础,即基础的CSS 布局语法.其包括基础排版(Typography).代码(Code).表 格(Tables).表单(Forms).按钮(Buttons).图片 (I ...
- [Bootstrap]7天深入Bootstrap(2)整体架构
大多数Bootstrap的使用者都认为Bootstrap只提供了CSS组件 和JavaScript插件,其实CSS组件和JavaScript插件只是Bootstrap框架的表现形式而已,它们都是构建在 ...
- bootstrap学习--什么是bootstrap
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...
- Bootstrap栅格系统用法--Bootstrap基础
1.栅格系统实现布局的原理 1)Bootstrap把屏幕的宽度拆分成12格(列),每一格像素的多少由设备屏幕分辨率决定,我们在开发项目的过程中不需要去指定像素或者百分比. 2)不同范围的分辨率对应不同 ...
- Bootstrap table方法，Bootstrap table事件，配置
调用 BootStrap Table 方法的语法: $('#table').bootstrapTable('method', parameter); 例如: $('#my_table').bootst ...
随机推荐
- 用node-webkit 开发 PC 客户端
7月 3 2013 导言 node-webkit 是一个很神奇的桌面客户端项目,正如这个项目的名字,这个项目是由node 和 webkit 构成,简单来说,就是你可以用HTML 5和 node 进 ...
- Three Sources of a Solid Object-Oriented Design
pingback :http://java.sys-con.com/node/84633?page=0,1 Object-oriented design is like an alloy consis ...
- Django 源码小剖: Django ORM 查询管理器
ORM 查询管理器 对于 ORM 定义: 对象关系映射, Object Relational Mapping, ORM, 是一种程序设计技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换.从 ...
- 【Cocos2d-Js基础教学（2）类的使用和面向对象】
类的使用和面向对象 大家都知道在cocos2d-x 底层是C++编写的,那么就有类的概念和继承机制. 但是在JS中,是没有类这个概念的,没有提供类,没有C++的类继承机制. 那么JS是通过什么方式实现 ...
- 表格类似Excel
只是很简单的实现表格,使用GridView控件-->可以上下左右滚动,但是不能合并 直接上代码: 1.主要布局 <?xml version="1.0" encoding ...
- Xcode工程使用CocoaPods管理第三方库新建工程时出现错误
工程使用CocoaPods管理第三方库,在新的目录update版本的时候出现如下问题 问题1描述: diff: /../Podfile.lock: No such file or director ...
- python问题：IndentationError:expected an indented block错误解决
Python语言是一款对缩进非常敏感的语言,给很多初学者带来了困惑,即便是很有经验的Python程序员,也可能陷入陷阱当中.最常见的情况是tab和空格的混用会导致错误,或者缩进不对,而这是用肉眼无法分 ...
- Windows Phone 支持中国移动官方支付
今天在这里与大家分享一个好消息,Windows Phone 官方支付支持中国移动(MO Payment),在此之前无论是 Windows Phone 的用户还是开发者,都知道在Windows Phon ...
- 『WPF』实现拖动文件到窗体（控件）
前言 实现从窗口外部拖文件到窗口内部并自动捕获文件地址. 第一步 开启属性 启用底层Window的AllowDrop属性,添加Drop事件. Drop事件:当你拖动文件到对应控件后,松开触发. 除Dr ...
- 安卓TTS语音合成经验分享（科大讯飞语音+）集成
应用场景:足浴软件,技师钟房安排调派和队列排序查看,语音播报提醒.老程序是使用双屏显卡,windows系统PC上运行一个无人值守桌面程序.如今安卓机顶盒(WIFI)和MINI电视棒通过HDMI接口和支 ...