zoukankan      html  css  js  c++  java
  • bootstrap初接触

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

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

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

    bootstrap最新版本:

    类似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

  • 相关阅读:
    ROW_NUMBER() OVER函数的基本用法
    oracle 中的next_day函数
    宽带大小与实际网速的关系:
    ora-29280 invalid directory path
    [spring]Attribute "scope" must be declared for element type "bean"
    什么是JDK,JRE,SDK,JVM以及API
    管理的常识: 让管理者发挥绩效的7个基本概念 读书笔记
    lua __index的简写
    lua中设置table={}时需要注意的坑
    摄像机旋转
  • 原文地址:https://www.cnblogs.com/redcoatjk/p/4836860.html
Copyright © 2011-2022 走看看