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. Js脚本选取iframe中的元素

    遇到个小问题,需要用到原生Js处理页面中的元素,以往一个document.getElementById就完活的选取元素,这次却不好使了.. 仔细看代码发现要选取元素外面多了一个iframe标签 < ...

  2. Java Consumer and Producer demo

    import java.util.Random; import java.util.concurrent.LinkedBlockingQueue; class producer {     Rando ...

  3. TFS 2013”无法移除仍为团队管理员身份的标识”

    由于开发人员的工作变动,在TFS 2013的日常维护中,经常需要将已经离开团队的成员账户移除出本团队项目. 一.将用户从团队成员中移除 一般情况下,只需要在团队项目的控制面板界面(控制面板>Co ...

  4. [转]Responsive Tables Demo

    本文转自:http://elvery.net/demo/responsive-tables/ A quick and dirty look at some techniques for designi ...

  5. 关键路径 SDUTOJ 2498

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

  6. Zbrush 4R7 P3中各类模型怎么快速隐藏

    在ZBrush®软件中除了遮罩功能可以对模型局部进行编辑外,我们还可以通过显示和隐藏来对模型的局部进行控制. 查看更多内容请直接前往:http://www.zbrushcn.com/jichu/xia ...

  7. UVALive 6255 Kingdoms --状态搜索

    题意:n个国家,给出国家间相互的债务关系,每个国家如果债务>收入就要破产,破产后该国的所有债务关系全部清除,第一个破产的国家不同有可能造成最后的没破产的国家的不同,问哪些国家有可能成为独自存活的 ...

  8. 我的Unity学习路线

    前言 上班的时间内都很忙在做项目,休息时间里闲下来了,却觉得没什么事做不自在.难道真是苦逼的命不会享受? 想了一下这一段时间以来的过程:先是重新看了一遍Unity的基础部分,然后买了<3D数学基 ...

  9. Linux命令学习－mkdir

    1. [root@www tmp]# mkdir test    <=建立一名为 test 的新目录 2. [root@www tmp]# mkdir -p /opt/tmp/abc   < ...

  10. [ORACLE错误］oracle 不能更新 PL/SQL 点击“edit data”报“ these query results are not updateable”

    你可以选择在查询语句的最后加上 for update,就可以打开编辑锁,直接修改数据. 而在默认查询下,点击Edit data,会报错:The query results are not update ...