您的位置：首页 > Web前端 > BootStrap

快速学习bootstrap前台框架

2014-08-21 17:49 357 查看
W3c里的解释

使用bootstrap需要注意事项

1、 在html文件第一行要加上<!doctype html>[s1]

2、 导入bootstrap.min.css文件

3、 导入jquery.js[s2] 与bootstrap.js[s3]

快速学习

1、 登陆http://www.w3cschool.cc/bootstrap

2、 查看里面解说

3、 通过以下实例了解如何学习w3c的bootstrap。（一个警告框的实例）

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 实例 - 警告（Alerts）</title>

<link href="bootstrap.min.css" rel="stylesheet">

<script src="jquery.min.js"></script>

<script src="bootstrap.min.js"></script>

[s4] </head>

<body>

<div class="alert[s5]  alert-success[s6] ">成功！很好地完成了提交。</div>

<div class="alert alert-info[s7] ">信息！请注意这个信息。</div>

<div class="alert alert-danger alert-dismissable">错误！请进行一些更改。

<button class="close[s8] " data-dissmiss[s9] ="alert[s10] ">×</button>

</div>

<div id="myalert" class="alert alert-warning">警告！请不要提交。

<button class="close">×</button>

</div>

<script>

$(".close").click(function(){

$("#myalert").button("close")[s11] [s12] ;

});

$(".close").on[s13] ("close.bs.alert[s14] ", function(){

alert("alert alert alert");

});

</script>

</body>

</html>


格栅系统快速知道

<div class="container[s15] ">

<div class="row[s16] ">

<div class="col-*-*[s17] "></div>

<div class="col-*[s18] -*[s19] "></div>

</div>

<div class="row">...</div>

</div>

<div class="container">....


本人使用网上的模板时，会卡住。这时浏览器左下方会出现连接fonts.googleapis.com提示，说明不能连接到谷歌服务器里。(有点暴力了)

解决方案：删除掉该模板中所有有关fonts.googleapis.com的字段，该字段一般出现在link标签中，把href设置为空即可。例如：

<link href=” fonts.googleapis.com/&*&**(*400,500” />

改成

<link href=”” />

[s1]起到支持w3c的作用

[s2]最好版本1.9的,jquery.min.js也行

[s3]bootstrap.min.js也行

[s4]必须要导入的文件

[s5]申明该div是一个警告框，由此可生成警告框的样式

[s6]声明该警告框的是一个成功的警告框的样式

[s7]同alert-success一样，不过样式做了点修改

[s8]同理是一个css样式，这里是一个关闭的样式，显示一个关闭小图标

[s9]相当于一个事件吧，改变行为，这里是关闭一个警告框

[s10]被关联的对象，要被关闭的对象

[s11]Button的一个方法，关闭class为alert的#myalert的div元素

[s12]等价于data-dissmiss [s12]="alert [s12]"，不过这里data-dissmiss [s12]="alert [s12]"要添加到元素里

[s13]不一定要是on，可以是live、bing等

[s14]Botton插件的一个事件

[s15]必须要有

[s16]必须要有,占用一行

[s17]必须要有，这里的值可以是col-md-1、col-md-2、col-xs-1等

[s18]采用什么设备，就选指定的值，比如:如果是平板就用sm即col-sm-1

[s19]是数值：1、2、3到12，最大为12
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航