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. MultiDex到底有多坑

    google为什么要引入MultiDex? dex指令是用16位寄存器来保存dex中的方法数,所以限制了在apk 中最大的方法数为65535,当超过这个最大值在编译的时候会报 方法数超标的错误. 如何 ...

  2. 0517 Scrum 项目4.0

    Sprint 1看板: 任务认领(一种标签颜色代表一个人的任务): 许佳仪:紫色 柯晓君:红色 赖文亮:蓝色 卓宇靖:黑色 每日例会的时间:16:00     地点:课室 成员 团队贡献分 许佳仪 1 ...

  3. flask 程序结构概括

    以此结构为例,这个小项目是<Flask Web开发:基于python的web应用开发实战>第一部分结束后的代码框架 第一层 有app.tests.migrations三个文件夹和confi ...

  4. meta name="viewport" content="width=device-width,initial-scale=1.0" 解释

     <meta name="viewport" content="width=device-width,initial-scale=1.0">   c ...

  5. C++ | boost库 类的序列化

    是的,这是今年的情人节,一篇还在研究怎么用的文章,文结的时候应该就用成功了. 恩,要有信心 神奇的分割线 不知何时装过boost库的header-only库, 所以ratslam中的boost是可以编 ...

  6. javascript画直线和画圆的方法（非HTML5的方法）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 2016 - 1- 24 大文件下载 关于NSOutStream 的使用补充

    // // ViewController.m // 大文件下载 // // Created by Mac on 16/1/24. // Copyright © 2016年 Mac. All right ...

  8. Nested List Weight Sum -- LeetCode 339

    Given a nested list of integers, return the sum of all integers in the list weighted by their depth. ...

  9. My first Scratch small game

    My first Scratch small game:https://scratch.mit.edu/projects/62700370/ PC or Mac only. Browser & ...

  10. Linux多人群聊系统（简单多线程服务器）

    一:要求 1.通过一个服务器实现最多5个客户之间的信息群发. 2.服务器显示客户的登录与退出: 3.客户连接后首先发送客户名称,之后发送群聊信息: 4.客户输入bye代表退出,在线客户能显示其他客户的 ...