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">  如不使用下拉组件,则点击下拉菜单无响应动作.

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

如:

 <!DOCTYPE html>

 <html>

 <head>

    <title>Bootstrap 实例 - 默认的导航栏</title>

    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

 </head>

 <body>

 <nav class="navbar navbar-default" role="navigation">

    <div class="navbar-header">

       <a class="navbar-brand" href="#">W3Cschool</a>

    </div>

    <div>

       <ul class="nav navbar-nav">      //备注: nav是导航条样式 navbar-nav是导航条内部ui li的样式

          <li class="dropdown">  //备注: 使用下拉菜单（Dropdown）插件

             <a href="#" class="dropdown-toggle" data-toggle="dropdown">

                Java

                <b class="caret"></b>

             </a>

             <ul class="dropdown-menu">

                <li><a href="#">jmeter</a></li>

                <li><a href="#">EJB</a></li>

                <li><a href="#">Jasper Report</a></li>

                <li class="divider"></li>

                <li><a href="#">分离的链接</a></li>

                <li class="divider"></li>

                <li><a href="#">另一个分离的链接</a></li>

             </ul>

          </li>

       </ul>

    </div>

 </nav>

 </body>

 </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

bootstrap初接触的更多相关文章

  1. 初接触BurpLoader工具

    初接触burp工具 菜鸟一枚,现在在接触一段时间测试,我在测试功能性的时候,想着网站被黑案例那么多,我是不是也应该弄弄安全性测试了,所以就有了下边的第一次接触BurpLoader工具来测试手机的app ...

  2. 软工实践练习-Git初接触

    第一次听到Git,有点不知所云,听了实践课老师的讲解,才明白了Git作为最先进的分布式版本控制系统的重要性. 至于Git的安装和使用仍旧是自己摸索着去完成了,当然在这过程中也是遇到了很多的问题. 接下 ...

  3. vi初接触

    vi初接触 它有三种模式: 一 一般模式 二 编辑模式 三 命令行模式 介绍几种比较常用的吧 -- 退出:q 写入:w 强制:! (以上可叠加) 显示行号:set nu 取消:set nonu 跳转到 ...

  4. ExtJS初接触 —— 了解 Ext Core

    ExtJS初接触 —— 了解 Ext Core Ext Core是一款和jQuery媲美的轻型JS库,基于MIT许可.对于Dom的操作,我个人还是比较喜欢用jQuery.当然如果项目中用的是ExtJS ...

  5. ExtJS初接触 - 在项目中使用ExtJS

    ExtJS初接触 - 在项目中使用ExtJS 今天ExtJS官网发布了ExtJS最新正式版4.2.1.Ext JS 4.2.1 正式版 下载 ExtJS为开发者在开发富客户的B/S应用中提供丰富的UI ...

  6. Java之路——Java初接触

    本文大纲 1.Java是什么 2.Java历史 3.Java技术范围 3.1 Java SE平台技术范围 3.2 Java EE技术范围 3.3 Java 体系技术范围 4.总结 1.Java是什么 ...

  7. python 之 数据类型初接触

    python 之 数据类型初接触 标准数据类型 Python3 中有六个标准的数据类型: Number(数字) String(字符串) List(列表) Tuple(元组) Set(集合) Dicti ...

  8. Dapr微服务应用开发系列2：Hello World与SDK初接触

    题记:上篇介绍了Dapr的环境配置,这次我们来动手尝试一下Dapr应用的开发 Hello World Dapr应用的Hello World其实和其他的Hello World一样简单: 首先用你喜欢的语 ...

  9. 坚持自学的第二天，bootstrap初入门

    前言 昨天,初步学完了jekyll目录结构与Liquid语法的应用与认识. 日志 今天刚入门,做了一个bootstrap导航栏,但是选中状态不行,找了JS中写好的API,写法与视频中讲的有点不一样,但 ...

随机推荐

  1. (40) Aeroo 服务安装

    服务器 Odoo 8.0 操作系统: Ubuntu trusty14.04 说明:安装aeroo 要的要两个服务 areoo-docs 和 soffice 这里设定两个端口 8989 和 8100 = ...

  2. java.util.logging.Logger 使用详解

    概述: 第1部分 创建Logger对象 第2部分 日志级别 第3部分 Handler 第4部分 Formatter 第5部分 自定义 第6部分 Logger的层次关系 参考 第1部分 创建Logger ...

  3. BZOJ2480 Spoj3105 Mod

    乍一看题面:$$a^x \equiv b \ (mod \ m)$$ 是一道BSGS,但是很可惜$m$不是质数,而且$(m, a) \not= 1$,这个叫扩展BSGS[额...... 于是我们需要通 ...

  4. iOS开发多线程篇—创建线程

    iOS开发多线程篇—创建线程 一.创建和启动线程简单说明 一个NSThread对象就代表一条线程 创建.启动线程 (1) NSThread *thread = [[NSThread alloc] in ...

  5. IT公司100题-32-交换元素，使数组差最小

    问题描述: 有两个整数序列a, b,大小都为n, 序列元素的值任意整数,无序. 要求:通过交换a, b 中的元素,使得sum(a)-sum(b),差最小. 例如: var a=[80, 40, 60, ...

  6. select document library from certain list 分类： Sharepoint 2015-07-05 07:52 6人阅读 评论(0) 收藏

    S using System; using Microsoft.SharePoint; namespace Test { class ConsoleApp { static void Main(str ...

  7. Ubuntu下部分文件操作的命令

    (1)创建目录 mkdir filefoldname (2)删除空目录 rmdir filefoldname (3)删除非空目录及其中所有文件 rm -rf filefoldname (4)移动文件或 ...

  8. CSS中相对定位与绝对定位

    看了几个讲解定位的博客,觉得还不错,分享之: 博客一:http://blog.sina.com.cn/s/blog_4bcf4a5e010008o0.html 文章中,主要需要参考的有两点: 1,相对 ...

  9. 团队开发——冲刺2.b

    冲刺阶段二(第二天) 1.昨天做了什么? 收集游戏图片:开始.暂停.继续.重新开始.退出……为了界面的后期美工做准备. 2.今天准备做什么? 把“开始游戏”.“退出游戏”.“取消”等文字按钮加工成游戏 ...

  10. linux安装eclipse

    1  采用ssh无法运行eclipse, 错误如下: Autolaunch error: X11 initialization failed.\n,  打开日志文件: org.eclipse.swt. ...