什么是Bootstrap

Bootstrap,来自Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。

国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。

Bootstrap框架用途和优点

我们可以使用Bootstrap框架提供的样式和组件快速的完成一个网站的前端页面,只需要引用一些定义好样式和组件(通过定义好的class来引用相应的样式和组件),就可以完成一个非常漂亮网页。而且Bootstrap框架还支持自适应,在不同大小的屏幕上会自动调节网页显示的内容,避免了在在pc上很漂亮的网页,而在移动端左右出现滚动条,网页内容太小看不清等不利于用户体验的表现。

Bootstrap文档目录结构

bootstrap /

├── css  // CSS文件

│   ├── bootstrap-theme.css  // Bootstrap主题样式文件

│   ├── bootstrap-theme.css.map

│   ├── bootstrap-theme.min.css  // 主题相关样式压缩文件

│   ├── bootstrap-theme.min.css.map

│   ├── bootstrap.css

│   ├── bootstrap.css.map

│   ├── bootstrap.min.css  // 核心CSS样式压缩文件

│   └── bootstrap.min.css.map

├── fonts  // 字体文件

│   ├── glyphicons-halflings-regular.eot

│   ├── glyphicons-halflings-regular.svg

│   ├── glyphicons-halflings-regular.ttf

│   ├── glyphicons-halflings-regular.woff

│   └── glyphicons-halflings-regular.woff2

└── js  // JS文件

├── bootstrap.js

├── bootstrap.min.js  // 核心JS压缩文件

└── npm.js

更多Bootstrap课程:阿里云大学——开发者课堂

Bootstrap入门!的更多相关文章

  1. 01.Bootstrap入门

    Bootstrap介绍: Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加 ...

  2. Bootstrap入门(二)栅格

    Bootstrap入门(二)栅格 Bootstrap入门(二)栅格 全局CSS样式--栅格 先引入本地的CSS文件(根据自己的文件夹,有不同的引入地址,我是放在一个新建的名为css的文件夹中) con ...

  3. BootStrap入门教程 (一)

    BootStrap入门教程 (一)   2011年,twitter的"一小撮"工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端 ...

  4. bootstrap 入门

    bootstrap 入门 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&q ...

  5. Bootstrap入门(三十)JS插件7:警告框

    Bootstrap入门(三十)JS插件7:警告框 通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...

  6. Bootstrap入门(二十九)JS插件6:弹出框

    Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...

  7. Bootstrap入门(二十八)JS插件5:工具提醒

    Bootstrap入门(二十八)JS插件5:工具提醒 工具提示在使用过程中比较常见,但是实现起来有些麻烦,而bootstrap则很好地解决了这个问题. 我们来写一个简单的实例 先引入CSS文件和JS文 ...

  8. Bootstrap入门(二十七)JS插件4:标签页

    Bootstrap入门(二十七)JS插件4:标签页 标签页的切换可以带动内容的变化 首先我们引入CSS文件 <link href="bootstrap.min.css" re ...

  9. Bootstrap入门(二十五)JS插件2:过渡效果

    Bootstrap入门(二十五)JS插件2:过渡效果 对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可.如果你使用的是编译(或压缩)版的bootstrap.js  ...

  10. Bootstrap入门(二十四)data属性

    Bootstrap入门(二十四)data属性 你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码.这是 Bootstrap 中的一 ...

随机推荐

  1. TensorFlow实战学习笔记(14)------VGGNet

    一.VGGNet:5段卷积[每段有2~3个卷积层+最大池化层][每段过滤器个数:64-128-256-512-512] 每段的2~3个卷积层串联在一起的作用: 2个3×3的卷积层串联的效果相当于一个5 ...

  2. NGUI学习随笔

    一.NGUI的直接用法 1.      Attach a Collider:表示为NGUI的某些物体添加碰撞器,如果界面是用NGUI做的,只能这样添加.(注:用Component添加无效). 2.  ...

  3. Java IO 流总结

    Java流操作有关的类或接口: Java流类图结构: 流的概念和作用 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象.即数据在两设备间的传输称为流,流的本质是数据传输,根据数据传输 ...

  4. Python CSV- 绘制气温图表

    CSV-  绘制气温图表 资源: 链接: https://pan.baidu.com/s/1kqREk-sRnOcC34Mh1lBDHQ 提取码: uyx7 # highs_lows_Jul.py 最 ...

  5. 计算机-禁止USB服务

    接到一个任务,禁止集团内所有电脑的USB接口进行文件拷贝,但不能妨碍打印机.鼠标键盘.扫描仪.加密狗等等一切需要USB接口工作的外部设备. 纠结了,这不摆明了让我蛋疼吗? 不过,疼归疼,办法总是要想滴 ...

  6. 洛谷 P1270 “访问”美术馆(树形DP)

    P1270 “访问”美术馆 题目描述 经过数月的精心准备,Peer Brelstet,一个出了名的盗画者,准备开始他的下一个行动.艺术馆的结构,每条走廊要么分叉为两条走廊,要么通向一个展览室.Peer ...

  7. Java Pattern Matcher 正则表达式需要转义的字符

    见:http://blog.csdn.net/bbirdsky/article/details/45368709 /** * 转义正则特殊字符 ($()*+.[]?\^{},|) * * @param ...

  8. Ubuntu16.04添加源的地址

    打开terminal,输入sudo gedit /etc/apt/sources.list,向该文件中添加源的地址即可,如,可添加如下地址 deb-src http://archive.ubuntu. ...

  9. chmod和chown命令具体使用方法

    Linux下数字表示文件的操作权限(777,755,..) Linux下.查看某路径下用(ls -l)查看全部文件的具体属性列表时.会看到文件的操作权限.类似"drwxr-xr-x" ...

  10. ios Button

    展现效果例如以下: 功能说明: 1加入来图片背景, 2动态展现百度网页, 3动态加入button. 4展现提示框.展现你点击提示框得index  我成功来你也快来试试. 1 详细得项目创建与拖动but ...