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. bootstrap笔记-栅格布局

    1.   .clearfix 这个类可以在栅格布局中起到一个不占空间的clear的作用,如下:可以尝试带.clearfix和不带它的区别 <div class="container-f ...

  2. Linux 文件基本属性

    Linux系统是一种典型的多用户系统,不同的用户处于不同的地位,拥有不同的权限.为了保护系统的安全性,Linux系统对不同的用户访问同一文件(包括目录文件)的权限做了不同的规定. 在Linux中我们可 ...

  3. 电脑的f5刷新不了

    新买的电脑,f5刷新不了页面,网上查了后发现是fn功能键的原因.同时fn+f5即可刷新.可是依然感觉好别扭... 按下fn+esc,再只按f5,就可以刷新页面了.神奇...

  4. VB6.0对鼠标滚轮不支持的解决方法[转]已经测试work

    今天要修改一个老DLL文件,安装了vb6,用起来很不爽. VB6编辑器 和 VBA编辑器 (Office 中的VB编辑器)都不支持鼠标滚动. 但 MS 已经提供了补丁http://download.m ...

  5. iOS开发拓展篇—UIDynamic(简单介绍)

    iOS开发拓展篇—UIDynamic(简单介绍) 一.简单介绍 1.什么是UIDynamic UIDynamic是从iOS 7开始引入的一种新技术,隶属于UIKit框架 可以认为是一种物理引擎,能模拟 ...

  6. Java正则匹配数字

    包括5种形式,如测试结果 import java.util.Scanner; import java.util.regex.*; public class Com { public static vo ...

  7. JavaScript 语句

    JavaScript 语句 JavaScript 语句向浏览器发出的命令.语句的作用是告诉浏览器该做什么. JavaScript 语句 JavaScript 语句是发给浏览器的命令. 这些命令的作用是 ...

  8. Android M新特性之APP Link

    The Android M Developer Preview introduces support for App Links, which improves upon existing link ...

  9. Umap2：开源USB host安全评估工具

    Umap2是一款由NCC Group和Cisco SAS小组开发的.基于python的USB host安全评估工具. 它拥有第一版所支持的所有功能: umap2emulate:USB设备枚举 umap ...

  10. [Java Basics] Collection

    除了Java collection class/interface外,方便的有Google guava的utility class: Lists/Sets/Maps/Queues, 用它们可以方便地创 ...