新随笔  :: 订阅 订阅  :: 管理

bootstrap初接触

Posted on 2015-09-24 22:51  redcoatjk  阅读(186)  评论(0)  编辑  收藏  举报

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架.(主要是结合HTML5 CSS3的样式, 基于jquery+Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。 )

2011年，twitter的“一小撮”工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所设计和建立，在github上开源之后，迅速成为该站上最多人watch&fork的项目。

    GitHub上这样介绍 bootstrap：简单灵活可用于架构流行的用户界面和交互接口的html,css,javascript工具集。基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档，自定义JQuery插件，完整的类库，基于Less等。

bootstrap最新版本:

  • V2.3.2 
  • v3.3.5

类似jquery.  2的版本不再更新但能兼容旧版的浏览器.  3版本代码比较简洁,不再兼容IE8甚至是IE7和IE6

2版本的官方地址 http://v2.bootcss.com/

 

起步和脚手架大概就是介绍bootstrap的情况. 以及搭建页面.  其中可以考虑将引入的js css等文件放到本地,或者使用百度之类的cdn网站,这样访问速度比较快

bootstrap大概分为几个模块:

[脚手架][基本CSS样式] [组件] [javascript插件]

脚手架: 布局相关

基本css样式:  常规的样式.

组件: 下拉菜单 按钮组  导航条 分页 警告框 进度条 等 如下面例子 <ul class="nav navbar-nav">

javascript插件: 组件的相关动作实现.如下面例子用到的下拉菜单组件 <li class="dropdown">  如不使用下拉组件,则点击下拉菜单无响应动作.

 插件内还可以设置很多参数和方法.

 

如:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4    <title>Bootstrap 实例 - 默认的导航栏</title>
 5    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 6    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 7    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
 8 </head>
 9 <body>
10 
11 <nav class="navbar navbar-default" role="navigation">
12    <div class="navbar-header">
13       <a class="navbar-brand" href="#">W3Cschool</a>
14    </div>
15    <div>
16       <ul class="nav navbar-nav">      //备注: nav是导航条样式 navbar-nav是导航条内部ui li的样式
17          <li class="dropdown">  //备注: 使用下拉菜单（Dropdown）插件
18             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
19                Java 
20                <b class="caret"></b>
21             </a>
22             <ul class="dropdown-menu">
23                <li><a href="#">jmeter</a></li>
24                <li><a href="#">EJB</a></li>
25                <li><a href="#">Jasper Report</a></li>
26                <li class="divider"></li>
27                <li><a href="#">分离的链接</a></li>
28                <li class="divider"></li>
29                <li><a href="#">另一个分离的链接</a></li>
30             </ul>
31          </li>
32       </ul>
33    </div>
34 </nav>
35 
36 </body>
37 </html>

效果:

 

 

 

 最后:

jquery 和Extjs 选择之外 在ui方面也出现了新的选择: 

easyUI、Extjs和Bootstrap都是浏览器前端控件库，

easyUI基于jQuery，免费的各个控件相对独立；

Extjs更高级一些控件与控件直接的交互用起来会很方便，要收费；

Bootstrap相对前两个来说在控件上面会差很多，但是在不同终端的兼容性方面做得很好，就是电脑、手机、平板等这些，这一点是前两个无法比的。

一般easyUI和Extjs是用来做后台管理系统的，Bootstrap是做网站界面的。

 

推荐学习地址:

http://getbootstrap.com/2.3.2/   http://v3.bootcss.com/

http://www.runoob.com/bootstrap/bootstrap-tutorial.html

http://www.cnblogs.com/ventlam/archive/2012/05/28/2520703.html