-- Bootstrap的起步部分是对Bootstrap的基本了解，有些细节只是在后面的完善时候需要详细阅读。 
最基本点还是Css 和组件部分，这部分应该先进行练习....
高级阶段是Javascript插件和定制部分；
最后是网站实例的学习。

** 学习需要持之以恒，不进则退。

1. Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
2. 起步：介绍，下载，使用，基本模板和案例
2.1 下载：
(1) 免费的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>
(2) 顶级目录下的/js/*.js：可以单独加载单个的Bootstrap插件
less -- Bootstrap源码的入口Less文件
style -- Bootstrap的未压缩的css文件
(3) Bootstrap插件依赖于jQuery,因此jQuery必须在Bootstrap之前引入
(4) 预编译版： 压缩后的文件，编译和压缩过的css和js，同时还包含来自Glyphicons的图标和字体

2.2 基本模板
<!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>
2.3 基本实例
(1) 入门模板
navbar navbar-onverse navbar-fixed-top
container
navbar-header
以及简单的响应布局：不同分辨率的响应布局方法
(2) Bootstrap主题，就是引入了theme.css文件；可以有更多的css效果
Buttons
Tables
Thumbnails
Labels
Badges
Dropdown menus
Navs
Navbars
Alerts
Progress bars
List groups
Panels
Wells
Carousel
(3) 栅格， 使用栅格布局； 层级tier，嵌套nesting等等
col-md-1 12
Mixed: mobile and desktop 分别是：.col-xs-1 12 .col-md-1 12
如果设置相同的宽度，只需要设置.col-xs-1 12
Cloum clearing: Clear float 使用 <div class="clearfix visible-xs"></div>

(4) Offset， push, and pull reset
(5) Jumbotron: 超大的显示屏
(6) Narrow jumbotron： 窄的显示屏
2.4 导航条实例
(1) 静态导航条和规定位置的导航条
navbar-default navbar-static-top navbar-fixed-top
2.5 自定义组件
(1) 封面图

(2) Carousel 旋转木马
(3) 博客主页
(4) 控制台
(5) 登录页
(6) Footer
2.6 实现性实例
(1) 非响应式Bootstrap布局
(2) Offcanvas
2.7 Bootlint工具： Bootlint是Bootstrap官方支持的Html检测工具，可以自动检查常见的Html错误，
2.8 社区
官方： getbootstrap.com
stackOverflow交流：twitter-bootstrap-3 关键字
Bootstrap优站精选 http://expo.bootcss.com/
Twitter: @getbootstrap
中文微博： @Bootstrap中文网
2.9 禁止响应式布局步骤：
(1) 移除设置浏览器视口（viewport）的标签：<meta>
(2) 通过为 .container 类设置一个 width 值从而覆盖框架的默认 width 设置，例如 width: 970px !important; 。请确保这些设置全部放在默认的 Bootstrap CSS 文件的后面。注意，如果你把它放到媒体查询中，也可以略去 !important 。
(3) 如果使用了导航条，需要移除所有导航条的折叠和展开行为。
(4) 对于栅格布局，额外增加 .col-xs-* 类或替换掉 .col-md-* 和 .col-lg-*。
* 针对 IE8 仍然需要额外引入 Respond.js 文件
可以使用网站上提供的“禁止响应式特性的 Bootstrap 模版”
2.10 浏览器和设备的支持情况
Internet Explorer 8 需要 Respond.js 配合才能实现对媒体查询（media query）的支持
IE8使用Response.js的时候还有一些情况需要注意，可以查阅官方文档
IE兼容模式：
Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此 <meta> 标签加入到你的页面中：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
国产浏览器高速模式：兼容模式(即IE内核)和高速模式(webkit内核)；
国内浏览器基本使用兼容模式，造成低版本IE(IE8及以下)让基本Bootstrap构建的网站展示效果很糟糕；
<meta name="renderer" content="webkit"> 目前只有360浏览器支持此标签
Windows 8 中的 Internet Explorer 10 和 Windows Phone 8：
Internet Explorer 10 并没有对 屏幕的宽度 和 视口（viewport）的宽度 进行区分，这就导致 Bootstrap 中的媒体查询并不能很好的发挥作用。
@-ms-viewport { width: device-width; }
--
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style')
msViewportStyle.appendChild(
document.createTextNode(
'@-ms-viewport{width:auto!important}'
)
)
document.querySelector('head').appendChild(msViewportStyle)
}
Safari 对百分比数字凑整的问题：
Safari 浏览器的绘制引擎对于处理 .col-*-1 类所对应的很长的百分比小数存在 bug。
也就是说，如果你在一行（row）之中定义了12个单独的列（.col-*-1），你就会看到这一行比其他行要短一些。除了升级 Safari/iOS 外，有以下几种方式来应对此问题：
为最后一列添加 .pull-right 类，将其暴力向右对齐
手动调整百分比数字，让其针对Safari表现更好（这比第一种方式更困难）
2.11 模态框、导航条和虚拟键盘
超出范围和滚动
虚拟键盘
导航条上的下拉菜单
浏览器的缩放功能
移动设备上应用 :hover/:focus
打印
2.12 Android 系统默认浏览器
Android 4.1 （甚至某些较新版本）系统的默认浏览器被设置为默认打开页面的应用程序（不同于 Chrome）。不幸的是， 一般情况下，这些浏览器有很多bug以及和CSS标准不一致的地方。
选项菜单

2.13 W3C 页面源码校验
2.14 对第三方组件的支持
box-sizing 属性
2.15 跳过导航区： 跳过导航栏的焦距
标题嵌套
色彩对比

Bootstrap的起步的更多相关文章

  1. bootstrap学习起步篇：初识bootstrap之表单验证（二）

    学习bootstrap是个过程,它提供给我们的文档上有很详细的说明.包括常用的栅栏布局.页面元素等,这里就不啰嗦了,今天,我就来说下结合jquery的表单验证. 最开始不借助插件,我们需要自己去编写验 ...

  2. bootstrap学习起步篇：初识bootstrap之html5语法构建hello篇（一）

    目前选择使用bootstrap作为前端页面模板,是件很省心的事情.官网上给出的实例和教程也很多.在实际使用过程中,我们也许还要借助文档去了解它的元素和样式.但也不能减少我们使用他的兴趣. 我准备将其整 ...

  3. Bootstrap学习——起步

    一,前言 个人不是专业从事前端开发,但在一个小公司里工作,作为有过这样经历的程序员都知道,开发一个网站或者是一个管理系统,程序员基本所有的事都包了,真是什么都要懂一点啊.而我个人也不怎么喜欢写CSS和 ...

  4. 第五模块：WEB开发基础 第3章·BootStrap&JQuery开发

    01-JQuery介绍 02-jQuery文件引入和加载的区别 03-jQuery的基础选择器 04-jQuery的层级选择器 05-jQuery的基本过滤选择器 06-jQuery的属性选择器 07 ...

  5. 第二篇.Bootstrap起步

    第二篇Bootstrap起步 我们可以在http://getbootstrap.com下载bootstrap的文件 点击左边的download bootstrap可以下载bootstrap的css,j ...

  6. Bootstrap学习之一起步

    说起Bootstrap,第一次接触到这个名词的时候还是同事在做自适应页面技术分享会时了解到,在之后的项目中就逐渐应用了这个前端WEB CSS框架.      

  7. 【02】bootstrap起步

    起步 简要介绍 Bootstrap,以及如何下载.使用,还有基本模版和案例,等等. 下载 Bootstrap (当前版本 v3.3.5)提供以下几种方式帮你快速上手,每一种方式针对具有不同技能等级的开 ...

  8. Bootstrap学习之起步

    安装Bootstrap环境 从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本.我下载的是预编译版,即下图中的第一个. 将其解压缩到任意目录即可看到以下(压缩 ...

  9. 浅谈Bootstrap——导航条起步

    不多说,直接上代码. <div class="navbar navbar-default"> <div class="container"&g ...

随机推荐

  1. J_link重刷固件

    第一步:上电短接ERS 第二步:上电短接TST      (擦除原来的固件) 完成上面两步后,再连接电脑,电脑将出现正常的串口连接 第三步:(烧固件) 在SAM-BA xxx固件烧写选好芯片类型,连接 ...

  2. 使用SpirngMvc拦截器实现对登陆用户的身份验证

    登陆成功则按returnUrl进行跳转,即跳转到登陆之前的页面,否则跳转到登陆页面,返回登陆错误信息. 1.SpringMVC.xml <!-- 映射器 --> <bean clas ...

  3. jenkins权限控制

    一.插件安装 插件:Role-based Authorization Strategy版本:2.3.2 二.全局安全配置 进入Jenkins后点击系统管理进入全局安全配置 当插件安装好的时候,授权策略 ...

  4. pta7-19打印学生选课清单（模拟）

    题目链接:https://pintia.cn/problem-sets/1101307589335527424/problems/1101314114875633664 题意:输入n个学生,k門课程, ...

  5. 中国剩余定理模板 51nod 1079

    题目链接:传送门 推荐博客:https://www.cnblogs.com/freinds/p/6388992.html (证明很好,代码有误). 1079 中国剩余定理  基准时间限制:1 秒 空间 ...

  6. ORACLE的强制索引

    在一些场景下,可能ORACLE不会自动走索引,这时候,如果对业务清晰,可以尝试使用强制索引,测试查询语句的性能. 以EMP表为例: 先在EMP表中建立唯一索引,如图. 普通搜索: SELECT * F ...

  7. How to set the bash display to not show the vim text after exit?

    Xshell客户端在vim编辑文件保存退出,仍然显示文本内容,而不是回到shell terminal终端. 解决办法如下: User1 is using TERM=xterm, in this cas ...

  8. Intellij创建简单Springboot项目

    Intellij创建简单Springboot项目 第一步:选择创建新项目——file-new-project 第二步:选择项目类型——Spring Initializr-next 第三步:输入项目信息 ...

  9. ln: operation not permitted

    ln: operation not permitted 在挂载的磁盘上建立软链接提示没有操作权限 例如: ln -s aa bb1ln:aa operation not permitted------ ...

  10. android抽屉效果

    所谓抽屉  是区别于侧滑菜单 他不会把内容区域挤掉  他只是覆盖在内容区域 下边一个布局文件  一个代码   可以说的就是布局文件就是 <android.support.v4.widget.Dr ...