![北京联动北方科技有限公司]()
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap-responsive.css">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<!--以上是引入js和css
Bootstrap.css是bootstrap核心样式，bootstrap-responsive.css是响应式样式
比如，当你在电脑上是这个样式
在ipad上是另外一个样式，
手机上又是另一个样式，
这就是响应式样式。
Bootstrap会在你拉伸页面是帮你改变样式完成切换样式，
比如 下面举个例子：
1 、加入了bootstrap-responsive.css：本例子效果。
原图：
拉伸图：
2 不加入了bootstrap-responsive.css：本例子效果。
原图：
拉伸图：
2个例子稍微对比下，大家就会发现 响应式样式的效果如何。
本来是有图的 不知道怎么回事不能上传 图片，可以的话 大家可以 下载附件去看~
-->
</head>
Bootstrap就是定义了很多class 让我们程序员使用这些class 写出漂亮的界面。
怎么配合各种class完成想实现的class就是我们学习bootstrap的意义。当然这需要长久的积累。
在这里我会依次给大家写几个小例子让大家感受下bootstrap的魅力。
当然这些例子也是我在网上看来的。
不过，就算是别人的东西，自己能去理解，去使用，就是自己的东西。
还有一个需要解释的是代码里<img src="http://placehold.it/1180x300">
意思就是访问placehold.it然后后面带上需要图片的大小，这个网址就会给以返回一张图片，见上图。
旋转木马这个功能想必大家都见过。但是要你自己单独写出就感觉也有点困难，还要自己写点js。
Bootstrap提供了这个功能，定义了相关的类。配合使用就可以了。
下面是源码：
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap-responsive.css">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container" >
<h1 class="page-header">旋转木马</h1>
<div class="carousel" id="carousel1">
<div class="carousel-inner">
<div class="item active">
<a href=""><img src="http://placehold.it/1180x300"></a>
</div>
<div class="item">
<a href=""><img src="http://placehold.it/1080x300"></a>
</div>
<div class="item">
<a href=""><img src="http://placehold.it/980x300"></a>
</div>
</div>
<a href="#carousel1" class="carousel-control" data-slide="prev"><</a>
<a href="#carousel1" class="carousel-control right" data-slide="next">></a>
</div>
</div>
</body>
</html>
当前位置：
论坛首页 »
自由讨论区 »
Android, Python及开发编程讨论区
»
发起投票
技术讨论
加好友
发消息
2014-6-1 11:53:21 |
赞(
操作
