我的bootstrap使用的历程

时间:2024-09-29 09:38:08

1.bootstrap快速开发,和amaze一样,同样是自己布局,然后找对应的模板,然后复制。

2.bootstrap实现的不完美的地方,我们要靠自己的样式去解决。

我的bootstrap使用的历程

我的bootstrap使用的历程

典型的居中布局,

container

row

col-lg-2 col-md-3 col-sm-3 col-xs-3

我的bootstrap使用的历程

我的bootstrap使用的历程

我的bootstrap使用的历程

*****************************************************************************************************

*****************************************************************************************************

我的bootstrap使用的历程

我的bootstrap使用的历程

*****************************************************************************************************
*****************************************************************************************************

<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表示给标题添加下划线。
我的bootstrap使用的历程

col-md-offset-6右偏移。如果小尺寸或者特小尺寸都不会偏移。

下边的alert alert-info只是为了添加颜色而已。

visible-xs alert alert-info 只有在小尺寸的时候才可以。

hidden-xs 只在特小尺寸下隐藏

我的bootstrap使用的历程

navbar-default换成navbar-inverse 颜色就会变成深的。

navbar-fixed-top

navbar-fixed-bottom

navbar-static-top

我的bootstrap使用的历程

=================================================================

=================================================================

我的bootstrap使用的历程

我的bootstrap使用的历程

====================================================================================

====================================================================================

我的bootstrap使用的历程

<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'这个可以去掉置灰的背景

我的bootstrap使用的历程

===================================================

调外部html的方法一:

我的bootstrap使用的历程

调外部html的方法二:

我的bootstrap使用的历程

调外部Html的方法三:

我的bootstrap使用的历程

=========================================================================

=========================================================================
我们可以在控制台输入进行控制。

$('#login-modal').modal('show');
$('#login-modal').modal('hide');
$('#login-modal').modal('toggle');

========================================================================

========================================================================

我的bootstrap使用的历程

我的bootstrap使用的历程

==================================================================

==================================================================

我的bootstrap使用的历程

slide是为了线性,而data-ride为了自动开始播放。

=================================================================

=================================================================

我的bootstrap使用的历程

添加小圆点:

我的bootstrap使用的历程

===================================================================================

===================================================================================

我的bootstrap使用的历程

prev-slide ,play-and-stop,next-slide这三个是自己定义。

我的bootstrap使用的历程

================================================================

================================================================

我的bootstrap使用的历程

我的bootstrap使用的历程

====================================================================

====================================================================

我的bootstrap使用的历程