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. C语言的函数

    "函数"在英文的翻译是"function",无论在自然科学还是计算机科学都是这个词,而"function"的本意是"功能" ...

  2. Centos Ping不通外网

    安装完成Vm,Centos6.5,设置了网络: 1.VM虚拟网络,采用桥接模式. 2.Centos里各种 设置ifcfg-eth0中的GETWAY,ADDIP等等 vim /etc/sysconfig ...

  3. python split()函数使用拆分字符串 将字符串转化为列表

    函数:split()Python中有split()和os.path.split()两个函数,具体作用如下:split():拆分字符串.通过指定分隔符对字符串进行切片,并返回分割后的字符串列表(list ...

  4. linux下mysql安装、目录结构、配置

    1.准备安装程序(官方网站下载) 服务端:MySQL-server-community-5.1.44-1.rhel4.i386.rpm 客户端:MySQL-client-community-5.1.4 ...

  5. C++中对象初始化

    在C++中对象要在使用前初始化,永远在使用对象之前先将它初始化. 1.对于无任何成员的内置类型,必须手工完成此事. 例如: int x=0; double d; std::cin>>d; ...

  6. Sql practice

    employee表 数据准备 use tempdb go if OBJECT_ID('employee') is not null drop table employee ;with employee ...

  7. HDU 2298 Toxophily 【二分+三分】

    一个人站在(0,0)处射箭,箭的速度为v,问是否能够射到(x,y)处,并求最小角度. 首先需要判断在满足X=x的情况下最大高度hmax是否能够达到y,根据物理公式可得 h=vy*t-0.5*g*t*t ...

  8. Fitnesse初体验

    FitNesse是一套软件开发协作工具 FitNesse是帮助大家加强软件开发过程中的协作的工具.能够让客户.测试人员和开发人员了解软件要做成什么样,帮助建议软件最终是否达到了设计初衷. 什么是Fit ...

  9. Android Studio下载与安装

    Android Studio下载与安装 1 2 3 4 5 分步阅读 百度经验:jingyan.baidu.com 自从Google宣布Android Studio将取代Eclipse,正式成为官方集 ...

  10. Lua笔记（2）

    函数高级特性 像新版c++一样,lua支持lambda表达式.也就是可以在函数内部声明函数.内层的函数可以访问外一层函数的局部变量. 一个函数以及它会访问到的外层函数的变量,称为闭包.这些变量又被称为 ...