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. linux 真·随笔

    复制操作 命令行模式下输入 6,9 co 12 复制第6行到第9行之间的内容到第12行后面. vim如何删除文件中所有东西 ggdG :%d 移动光标到指定行的行尾 $:移动光标到行尾 n$:移动到第 ...

  2. SPSS数据分析—多重线性回归

    只有一个自变量和因变量的线性回归称为简单线性回归,但是实际上,这样单纯的关系在现实世界中几乎不存在,万事万物都是互相联系的,一个问题的产生必定多种因素共同作用的结果. 对于有多个自变量和一个因变量的线 ...

  3. 初学jquery，自己写的一个jquery幻灯片，代码有些笨拙，希望有大神可以指点一二，精简一下代码

    html代码 <div class="picCon"> <div class="bigPic"> <ul> <li c ...

  4. hdu 5877/ 2016 ACM/ICPC Dalian Online 1010 Weak Pair

    题目链接 分析:树上的节点祖先与儿子的关系,一般就会想到dfs序.正解就是对树先进行dfs序排列,再将问题转化到树状数组统计个数.应该把节点按照权值从大到小排序,这样对于,就是从小到大的顺序.这样更新 ...

  5. junit基础篇、中级篇-实例代码

    学习文章: http://blog.csdn.net/andycpp/article/details/1327147 http://wenku.baidu.com/link?url=C27gDEj0l ...

  6. PHP中字符串的连接和换行

    PHP中字符串的连接使用点,不是加号.换行\n需要用双引号括起来,不能用单引号. eg. <?php print_r("hello"."\n"); pri ...

  7. log4net.NoSql +ElasticSearch 实现日志记录

    前言: 前两天在查找如何扩展log4net的日志格式时找到一个开源项目Log4net.NoSql,它通过扩展Appender实现了把日志输出到ElasticSearch里面.顺藤摸瓜,发现涉及的项目还 ...

  8. C#/ASP.NET MVC微信公众号接口开发之从零开发（一） 接入微信公众平台

    微信公众平台接入:其实很简单,把两个参数(地址和token)填入微信公众平台后台,暂时选择明文模式 ,其中token自己定义.微信服务器会根据后台填写的地址访问,并且带上对于的参数 如 url+&am ...

  9. 设计模式之二：MVC

    模型(Model) 视图(View) 控制器(Controller) (MVC) 是 Cocoa 中的一种行为模块,并且也是所有 Cocoa 设计模式中使用最多的.在程序中按照它们的角色来分类这些对象 ...

  10. Soufun_News

    using AnfleCrawler.Common; using System; using System.Collections.Generic; using System.ComponentMod ...