[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:

?


1

2

3

4

5

6

7

8

9

10

11

<!-- 新 Bootstrap 核心 CSS 文件 -->

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

<!-- 可选的Bootstrap主题文件(一般不用引入) -->

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

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

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

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<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样式。

?


1

2

3

4

5

6

7

8

9

10

11

12

@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

自执行函数

?


1

2

3

4

(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"表示该区域用于导航

时间: 2024-10-09 19:44:25

[Bootstrap]7天深入Bootstrap(1)入门准备的相关文章

【Bootstrap】1.初识Bootstrap

作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好.扩浏览器的解决方案. 1.下载Bootstrap 打开官方网址 http://getbootstrap.com/ 进行下载. 2.准备项目模板文件夹 接下来,我们为第一个项目创建一个文件夹以及一些基本的文件.谓词我们还要用到HTML5样板文件 HTML5 Boilerplate(H5BP),然后把Bootstrap的有用文件复制过去. 2.1 下载H5BP 访问网站链接地址:https://html5boiler

BootStrap之基础-1 BootStrap起步(基本概念、环境搭建)

一.基本概念 Bootstrap 简介 - 移动设备优先 - 所有的主流浏览器都支持Bootstrap 它既是由动态CSS语言Less写成 Github热门开源项目 包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目 够成 Bootstrap 目录说明 - CSS目录--用于存放Bootstrap框架使用的样式文件 - bootstrap.css文件: Bootstrap框架的样式文件 - bootstrap.min.css文件:Bootstrap框架的样式压

Bootstrap页面布局7 - Bootstrap响应式布局的实用类

在bootstrap-responsive.css这个CSS样式表中已经为我们设定好了几个实用的类: .visible-phone: 在智能手机设备上显示这个元素,在其他设备上隐藏该元素 .visible-tablet: 在平板电脑上显示这个元素,在其他设备上隐藏该元素 .visible-desktop: 在桌面电脑上显示这个元素,在其他设备上隐藏该元素 .hidden-phone: 在智能手机上隐藏,在其他设备上显示该元素 .hidden-tablet: 在平板电脑上隐藏,在其他设备上显示该元

快速了解Bootstrap—在MVA学习Bootstrap

©版权声明:本文为博主原创文章,如需转载请注明出处. Bootstrap 是目前最流行的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB项目. 如果您希望在几个小时内对Bootstrap有一个直观的了解,观看微软虚拟学院(MVA)的视频教学Building Responsive UI with Bootstrap或许是个不错的选择. 这是一个大概六个小时的视频教学,分为七个部分.除了视频,每个部分还配有PPT和小测验.视频是英文的,配有英文字幕.通过这几个小时的学习

[Bootstrap]7天深入Bootstrap(4)CSS组件

Bootstrap框架的三大核心之二:组件. 组件也是最核心的地方,因为绝大部分的网页都必须利用组件才能构建出绚丽的页面. 组件包括:Icon图标(Glyphicon). 下拉菜单(Dropdown).按钮组(Button group).按钮下拉菜单(Button dropdown).输入框组(Input group).导航 (Nav).导航条(Navbar).面包屑导航(Breadcrumb).分 页导航(Pagination).标签(Label).徽章(Badge).大屏幕 展播(Jumbo

BootStrap之基础-5 BootStrap定制(LESS概述、LESS语法)

一.LESS概述 LESS概述 - 动态样式语言 - LESS 将 CSS 赋予了动态语言的特性 - 变量.继承.运算.函数 - LESS 既可以在 客户端上运行 - 也可以借助Node.js或者Rhino在服务端运行 - 变量 - @color: #4D926F; - h2 { color: @color; } - 混合 - .myStyle{} - H2{ .myStyle } - 嵌套规则 - #header{h1{} p{a{}}} - 函数&运算 - @color:#aabbcc; #

[Bootstrap]7天深入Bootstrap(5)JavaScript插件

在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab).提示 框(Tooltip).弹出框(Popover).警告框(Alert).按钮(Button).折叠(Collapse).旋转轮播(Carousel).定位浮标(Affix). 由于各种加班,身心疲惫... 动画过渡 源文件:transition.js 使用的动画过渡效果全部使用了 CSS3的语法

Bootstrap栅格系统用法--Bootstrap基础

1.栅格系统实现布局的原理 1)Bootstrap把屏幕的宽度拆分成12格(列),每一格像素的多少由设备屏幕分辨率决定,我们在开发项目的过程中不需要去指定像素或者百分比. 2)不同范围的分辨率对应不同设备 超小屏幕 手机(<768px)               类的前缀:-col-xs- 小屏幕 平板(>=768px<992px)   类的前缀:-col-sm- 中等屏幕 桌面显示器(>=992px<1200px)类的前缀:-col-md- 大屏幕 大桌面显示器(>

[Bootstrap]7天深入Bootstrap(3)CSS布局

Bootstrap三大核心内容的基础,即基础的CSS 布局语法.其包括基础排版(Typography).代码(Code).表 格(Tables).表单(Forms).按钮(Buttons).图片 (Images).辅助类(Helper Classes)和响应式设计 (Responsive utilities). 本节目录: 概述 基础排版 代码 表格 表单 按钮 图像 辅助样式 概述 HTML5文档类型 由于Bootstrap使用了HTML5特定的HTML元素和CSS属性,所 以使用Bootst