我的bootstrap使用的历程
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'>×</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使用的历程的更多相关文章
- bootstrap栅格布局学习历程
了解一个东西.他叫什么?他由什么组成,能做什么? 现在响应式的网站(在不同分辨率下有不同的布局)很瘦欢迎.优点:1.解决设备之间的差异化展示缺点:a.兼容性代码多,工作量大,加载速度受到影响;b.用户 ...
- 日志打入kafka改造历程-我们到底能走多远系列49
方案 日志收集的方案有很多,包括各种日志过滤清洗,分析,统计,而且看起来都很高大上.本文只描述一个打入kafka的功能. 流程:app->kafka->logstash->es-&g ...
- JavaScript & jQuery & Bootstrap
一.前言 javascript 简称 JS 与java编程语言 没有什么关系 JavaScript: {核心(ECMAScript) 文档对象模型(DOM) Document object mode ...
- 我的spring cloud项目历程（2018.3~2018.9）
前言 今天是9月17日,趁着山竹的临幸,得以在家里舒适的办公.项目从3月底开始,至今刚好半年.抽几十分钟,总结下半年的历程.对后面的项目,应该也有一点帮助吧. 学习前的七个问题 项目开始前,由于某些特 ...
- MVC5发展历程，从MVC2谈起
目前,MVC已经发布了5个版本,不包括一些临时的版本,为了更好的了解MVC5,知道MVC的发展历程是非常重要的.本篇随笔主要讲解3个版本的内容及其新特性. 1.MVC 2,发布日期:2010年3月 部 ...
- 旺财速啃H5框架之Bootstrap（五）
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
- 旺财速啃H5框架之Bootstrap（四）
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
- 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 ...
- bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...
随机推荐
- 恶意IP远程登录Linux服务器脚本
#!/bin/sh #auto drop ssh failed IP address #定义变量 SEC_FILE=/var/log/secure #如下为截取secure文件恶意ip 远程登录22端 ...
- Syslog-ng
一.简介 与 syslog相比 ,syslog-ng 具有众多高级的功能:更好的网络支持,更加方便的配置,集中式的网络日志存储,并且更具有弹性.比如,使用syslogd时,所有的iptables日志与 ...
- hdu 2199 Can you solve this equation?(二分搜索)
Can you solve this equation? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ( ...
- Excel中利用IF和TIME函数计算出上下班状态！
大家都知道现在上下班实行打卡制,制作考勤的人员需要对你上下班的时间,计算出上下班的状态,比如:迟到.早退.加班.正常等.下面为您介绍一个“帮手”. 1.打开Excel文档.如下图 ...
- tarjan算法+缩点：求强连通分量 POJ 2186
强连通分量:1309. [HAOI2006]受欢迎的牛 ★★ 输入文件:cow.in 输出文件:cow.out 简单对比时间限制:1 s 内存限制:128 MB [题目描述] 每一头牛 ...
- web前端笔试题总结
em和rem的区别: 浏览器的默认字体高度是16px,1em=16px:大小可以自己设置调整,并且默认集成父级容器中文本的大小. rem是CSS3中新增的属性,默认情况下是文本尺寸的大小,不同的是它集 ...
- CSS强制性换行word-break与word-wrap的使用
一般情况下,元素拥有默认的white-space:normal(自动换行,不换行是white-space:nowrap),当录入的文字超过定义的宽度后会自动换行,但当录入的数据是一堆没有空格的字符或字 ...
- HDU 1394 & ZOJ 1484 Minimum Inversion Number
(更新点查询区间) 这题重在想到,写代码很容易了..这题是利用线段树求逆序数,不按给定的顺序建树,而是有序地插入.比如每插入一个数,就统计之前插入的那些数里比他大的有多少个,这个数就是此时的逆序数,然 ...
- Jira－Clone与发邮件的使用
1.克隆问题 包括两部分,先进行Clone,再进行移动 a.选择要克隆的问题,点击More Actions-Clone,在弹出框“复制问题”中,点击“创建”按钮即克隆成功 b.移动问题,点击More ...
- JetBrain WebStorm 注册码
webStorm : UserName:William ===== LICENSE BEGIN ===== 45550-12042010 00001SzFN0n1bPII7FnAxnt0DDOPJA ...