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. Sping mvc 环境下使用kaptcha 生成验证码

    一.kaptcha 的简介 kaptcha 是一个非常实用的验证码生成工具.有了它,你可以生成各种样式的验证码,因为它是可配置的.kaptcha工作的原理是调用 com.google.code.kap ...

  2. 01_蚂蚁感冒(第五届蓝桥预赛本科B组第8题 nyoj 990)

    问题来源:第五届蓝桥预赛本科B组第8题 问题描述:有在一条定长(100cm)的直杆上有n(1<n<50)只蚂蚁(每只蚂蚁的起点都不一样),他们都以相同的速度(1cm/s)向左或者向右爬,  ...

  3. java String部分源码解析

    String类型的成员变量 /** String的属性值 */ private final char value[]; /** The offset is the first index of the ...

  4. hdu 3987 Harry Potter and the Forbidden Forest 求割边最少的最小割

    view code//hdu 3987 #include <iostream> #include <cstdio> #include <algorithm> #in ...

  5. Tomcat 长连接与短连接性能测试

    环境: 操作系统:centos 6.5 x64 cpu:32 core 内存:  32G web服务器:tomcat 6.x jdk :1.6x 测试环境: 操作系统:centos 6.5 x64 c ...

  6. 多次访问节点的DFS POJ 3411 Paid Roads

    POJ 3411 Paid Roads Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6553   Accepted: 24 ...

  7. 迭代加深搜索 codevs 2541 幂运算

    codevs 2541 幂运算  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题目描述 Description 从m开始,我们只需要6次运算就可以计算出 ...

  8. codeforces 710E E. Generate a String(dp)

    题目链接: E. Generate a String time limit per test 2 seconds memory limit per test 512 megabytes input s ...

  9. CSS 属性 - position讲解

    postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: 1. position: static2. position: inherit3. position: r ...

  10. Tarjian算法求强联通分量

    如果两个顶点可以相互通达,则称两个顶点强连通(strongly connected).如果有向图G的每两个顶点都强连通,称G是一个强连通图.强连通图有向图的极大强连通子图,称为强连通分量(strong ...