初识Bootstrap(一)

原创 赤水  2015年12月14日 13:56 阅读 279 次
一.Bootstrap 简介
    Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美,可用于快速、简单地构建基于 PC 及移动端设备的 Web 页面需求。
    2010 年 6 月,Twitter 内部的工程师为了解决前端开发任务中的协作统一问题。经历各种方案后,Bootstrap 最终被确定下来,并于 2011 年 8 月发布。经过很长时间的迭代升级,由最初的 CSS 驱动项目发展成为内置很多 JavaScript 插件和图标的多功能 Web 前端的开源框架。
    Bootstrap 最为重要的部分就是它的响应式布局,通过这种布局可以兼容 PC 端、PAD以及手机移动端的页面访问。

Bootstrap 下载及演示:

    国内文档翻译官网:http://www.bootcss.com

 

# 下载

 

二.Bootstrap 特点
    Bootstrap 非常流行,得益于它非常实用的功能和特点。主要核心功能特点如下:
    (1).跨设备、跨浏览器可以兼容所有现代浏览器,包括比较诟病的 IE7、8。
    (2).响应式布局不但可以支持 PC 端的各种分辨率的显示,还支持移动端 PAD、手机等屏幕的响应式切换显示。
    (3).提供的全面的组件Bootstrap 提供了实用性很强的组件,包括:导航、标签、工具条、按钮等一系列组件,方便开发者调用。
    (4).内置 jQuery 插件Bootstrap 提供了很多实用性的 jquery 插件,这些插件方便开发者实现 Web 中各种
    (5).支持 HTML5、CSS3HTML5 语义化标签和 CSS3 属性,都得到很好的支持。
    (6).支持 LESS 动态样式LESS 使用变量、嵌套、操作混合编码,编写更快、更灵活的 CSS。它和 Bootstrap 能很好的配合开发。

三.Bootstrap 结构
    首先,想要了解 Boostrap 的文档结构,需要在官网先把它下载到本地。Bootstrap
    下载地址如下:
    Bootstrap 下载地址:http://v3.bootcss.com/ (选择生产环境即可,v3.3.4)
    解压后,目录呈现这样的结构:
    bootstrap/
    ├── css/
        │
        ├── bootstrap.css   #没有压缩的css 样式,提供我们学习使用
        │
        ├── bootstrap.css.map    #map 后缀的文件则是css 源码映射表,在一些特定的浏览器工具中使用   
        │
        ├── bootstrap.min.css   #压缩过的css 样式,容量小,供生产环境
        │
        ├── bootstrap-theme.css
        │
        ├── bootstrap-theme.css.map
        │
        └── bootstrap-theme.min.css
    ├── js/
        │
        ├── bootstrap.js
        │
        └── bootstrap.min.js
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff

        └── glyphicons-halflings-regular.woff2 

 

四.测试,构建一个测试html

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="/code/css/bootstrap.css">    
</head>
<body>
    <button class="btn btn-info">BootStrap</button>
</body>
</html> 

 

  


#看效果是不是简洁,省去了大量的css和html代码
   

 

本文地址: http://blog.lssin.com/readblog/15.html
版权声明:本文为原创文章,版权归  赤水 所有,欢迎分享本文,转载请保留出处!

发表评论


表情