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这三个是自己定义。
================================================================
================================================================
====================================================================
====================================================================