Bootstrap
创建自twitter的设计师与开发者,基于HTML,CSS,JAVASCRIPT的简洁灵活的流行前端框架及交互组件集,Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。
http://twitter.github.com/bootstrap/
页面中加了两插件(bootstrap-wysihtml5和bootstrap-datepicker),网上下载到的
<meta content="text/html; charset=UTF-8"http-equiv="Content-Type" />
?
?
<linktype="image/x-icon" rel="shortcut icon" href="icon/favicon.ico"/>
?
?
?
?
?
?
<link rel="stylesheet" type="text/css"href="css/bootstrap.css" />
?
?
?
?
?
?
<link rel="stylesheet" type="text/css"href="css/prettify.css" />
?
?
?
<link rel="stylesheet" type="text/css"href="css/bootstrap-wysihtml5.css" />
?
?
?
?
?
?
<link type="text/css" rel="stylesheet"href="css/bootstrap-datepicker.css" />
?
?
?
?
?
?
<style type="text/css">
?
?
?
?
?
?
?
?
body
?
?
?
?
?
?
?
?
{
?
?
?
?
?
?
?
?
?
?
font-size:12px;
?
?
?
?
?
?
?
?
?
?
font-family:"微软雅黑";
?
?
?
?
?
?
?
?
}
?
?
?
?
?
?
</style>
?
?
?
?
?
?
<scriptsrc="js/jquery-1.8.2.min.js"></script>
?
?
?
?
?
?
<scriptsrc="js/bootstrap.js"></script>
?
?
?
?
?
?
<scriptsrc="js/wysihtml5-0.3.0.js"></script>
?
?
?
?
?
?
<script type="text/javascript"src="js/date.js"></script>
?
?
?
?
?
?
<script type="text/javascript"src="js/bootstrap-datepicker-zh_CN.js"></script>
?
?
?
?
?
?
<scriptsrc="js/bootstrap-wysihtml5-zh_CN.js"></script>
?
?
?
?
?
?
<script type="text/javascript">
?
?
?
?
?
?
?
?
?
$(document).ready(function() {
?
?
?
?
?
?
?
?
?
?
?
?
$(".textarea").wysihtml5();
?
?
?
?
?
?
?
?
?
?
?
?
$("#dp1,#dp2")
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
.datepicker()
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
.on("changeDate",function(event) {
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
//alert(event.date);
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
});
?
?
?
?
?
?
?
?
?
})
?
?
?
?
?
?
</script>
?
</head>
效果如下:
转自:http://blog.sina.com.cn/s/blog_4b3196670101fi8z.html