Bootstrap学习 小例子

分类： Twitter Bootstrap 2013-08-03 22:50 736人阅读 评论(0)收藏 举报

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