1.bootstrap快速开发，和amaze一样，同样是自己布局，然后找对应的模板，然后复制。

2.bootstrap实现的不完美的地方，我们要靠自己的样式去解决。

典型的居中布局，

container

row

col-lg-2 col-md-3 col-sm-3 col-xs-3

*****************************************************************************************************

*****************************************************************************************************

*****************************************************************************************************
*****************************************************************************************************

<body class="body-container">

body会给网页加背景，通常开发阶段的时候用的。

<div class='clearfix'></div>

这个我们可以看到清楚浮动。

****************************************************************************************************

****************************************************************************************************

0.boot的开始需要引入meta viewport的东西。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--如果支持Google Chrome Frame：GCF，则使用GCF渲染；如果系统安装ie8或以上版本，则使用最高版本ie渲染；否则，这个设定可以忽略。-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- width - viewport的宽度 height - viewport的高度;initial-scale - 初始的缩放比例;minimum-scale - 允许用户缩放到的最小比例;maximum-scale - 允许用户缩放到的最大比例;user-scalable - 用户是否可以手动缩放-->
1. col-xs-* 小于768. col-sm-* 大于769，col-md 996. col-lg 1200.
2.boot3 12格
3.container表示左右居中，有固定的宽度。h1标签添加page-header表示给标题添加下划线。

col-md-offset-6右偏移。如果小尺寸或者特小尺寸都不会偏移。

下边的alert alert-info只是为了添加颜色而已。

visible-xs alert alert-info 只有在小尺寸的时候才可以。

hidden-xs 只在特小尺寸下隐藏

navbar-default换成navbar-inverse 颜色就会变成深的。

navbar-fixed-top

navbar-fixed-bottom

navbar-static-top

=================================================================

=================================================================

====================================================================================

====================================================================================

<div class='modal-backdrop in'></div>

点击后出现

<a href='' data-toggle='modal' data-target='#login-modal'>登录</a>

fade有过渡

点击关闭后关闭Modal
<button class='close' data-dismiss='modal'>&times;</button>

modal

tabindex='-1'  去掉 tab esc等效果。
data-backdrop='false'这个可以去掉置灰的背景

===================================================

调外部html的方法一：

调外部html的方法二：

调外部Html的方法三：

=========================================================================

=========================================================================
我们可以在控制台输入进行控制。

$('#login-modal').modal('show');
$('#login-modal').modal('hide');
$('#login-modal').modal('toggle');

========================================================================

========================================================================

==================================================================

==================================================================

slide是为了线性，而data-ride为了自动开始播放。

=================================================================

=================================================================

添加小圆点：

===================================================================================

===================================================================================

prev-slide ，play-and-stop,next-slide这三个是自己定义。

================================================================

================================================================

====================================================================

====================================================================

我的bootstrap使用的历程的更多相关文章

  1. bootstrap栅格布局学习历程

    了解一个东西.他叫什么?他由什么组成,能做什么? 现在响应式的网站(在不同分辨率下有不同的布局)很瘦欢迎.优点:1.解决设备之间的差异化展示缺点:a.兼容性代码多,工作量大,加载速度受到影响;b.用户 ...

  2. 日志打入kafka改造历程-我们到底能走多远系列49

    方案 日志收集的方案有很多,包括各种日志过滤清洗,分析,统计,而且看起来都很高大上.本文只描述一个打入kafka的功能. 流程:app->kafka->logstash->es-&g ...

  3. JavaScript & jQuery & Bootstrap

    一.前言 javascript 简称 JS  与java编程语言 没有什么关系 JavaScript: {核心(ECMAScript) 文档对象模型(DOM) Document object mode ...

  4. 我的spring cloud项目历程（2018.3~2018.9）

    前言 今天是9月17日,趁着山竹的临幸,得以在家里舒适的办公.项目从3月底开始,至今刚好半年.抽几十分钟,总结下半年的历程.对后面的项目,应该也有一点帮助吧. 学习前的七个问题 项目开始前,由于某些特 ...

  5. MVC5发展历程，从MVC2谈起

    目前,MVC已经发布了5个版本,不包括一些临时的版本,为了更好的了解MVC5,知道MVC的发展历程是非常重要的.本篇随笔主要讲解3个版本的内容及其新特性. 1.MVC 2,发布日期:2010年3月 部 ...

  6. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  7. 旺财速啃H5框架之Bootstrap（四）

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  8. C#与C++的发展历程第三 - C#5.0异步编程巅峰

    系列文章目录 1. C#与C++的发展历程第一 - 由C#3.0起 2. C#与C++的发展历程第二 - C#4.0再接再厉 3. C#与C++的发展历程第三 - C#5.0异步编程的巅峰 C#5.0 ...

  9. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

随机推荐

  1. 记一次hadoop datanode进程问题分析

    症状:datanode进程还在,但是在web ui接口发现该节点已经被置为dead节点.监测datanode进程日志,开始时一直狂刷很忙,后来停止刷新日志. 分析datanode进程日志,发现如下一些 ...

  2. Django WSGI Error:class.__dict__ not accessible in restricted mode

    一.问题 今天网站出了一个错误: RuntimeError at /index.html class.__dict__ not accessible in restricted mode 二.原因 用 ...

  3. [转]asp.net的ajax以及json

    本文转自:http://www.cnblogs.com/ensleep/p/3319756.html 来现在这家公司以前,从未接触过webform,以前在学校做的项目是php,java以及asp.ne ...

  4. 《TCP/IP详解 卷一》读书笔记-----第三章 IP

    1.Network byte order:数据在网络中的传输是按照大端模式来的,即如果需要传递一个四个字节的int变量,先传递最高的字节,然后依次类推.因此无论主机存储数据用的是大端模式还是小端模式, ...

  5. 关键路径 SDUTOJ 2498

    SDUTOJ 2498 AOE网上的关键路径 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 一个无环的有向图称为无环图(Dire ...

  6. JavaWeb学习----JSP内置对象详解

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  7. flex+AS3编程规范

    flex+AS3编程规范 Flex+AS3编码规范 http://www.cnblogs.com/jiahuafu/   1.  缩写: 尽量避免使用缩写,使用缩写时尽量和Flex保持一致.但要记住一 ...

  8. java 11-8 在大串中查找小串的案例

    1.统计大串中小串出现的次数 举例: 在字符串"woaijavawozhenaijavawozhendeaijavawozhendehenaijavaxinbuxinwoaijavagun& ...

  9. ArcGis 创建IWorkspace

     );             ESRI.ArcGIS.esriSystem.IName name = (ESRI.ArcGIS.esriSystem.IName)workspaceName;     ...

  10. Android应用开发中如何使用隐藏API（转）

    一开始需要说明的是,Google之所以要将一些API隐藏(指加上@hide标记的public类.方法或常量)是有原因的.其中很大的原因就是Android系统本身还在不断的进化发展中.从1.0.1.1到 ...