Bootstrap入门!
什么是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入门!的更多相关文章
- 01.Bootstrap入门
Bootstrap介绍: Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加 ...
- Bootstrap入门(二)栅格
Bootstrap入门(二)栅格 Bootstrap入门(二)栅格 全局CSS样式--栅格 先引入本地的CSS文件(根据自己的文件夹,有不同的引入地址,我是放在一个新建的名为css的文件夹中) con ...
- BootStrap入门教程 (一)
BootStrap入门教程 (一) 2011年,twitter的"一小撮"工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端 ...
- bootstrap 入门
bootstrap 入门 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&q ...
- Bootstrap入门(三十)JS插件7:警告框
Bootstrap入门(三十)JS插件7:警告框 通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...
- Bootstrap入门(二十九)JS插件6:弹出框
Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...
- Bootstrap入门(二十八)JS插件5:工具提醒
Bootstrap入门(二十八)JS插件5:工具提醒 工具提示在使用过程中比较常见,但是实现起来有些麻烦,而bootstrap则很好地解决了这个问题. 我们来写一个简单的实例 先引入CSS文件和JS文 ...
- Bootstrap入门(二十七)JS插件4:标签页
Bootstrap入门(二十七)JS插件4:标签页 标签页的切换可以带动内容的变化 首先我们引入CSS文件 <link href="bootstrap.min.css" re ...
- Bootstrap入门(二十五)JS插件2:过渡效果
Bootstrap入门(二十五)JS插件2:过渡效果 对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可.如果你使用的是编译(或压缩)版的bootstrap.js ...
- Bootstrap入门(二十四)data属性
Bootstrap入门(二十四)data属性 你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码.这是 Bootstrap 中的一 ...
随机推荐
- python网络编程part1
1. 网络架构 单机 单机游戏 以下两个基于网络的 CS架构 客户端游戏 cs--->client客户/server服务 你自己是客户端(消费)--->服务端(收钱) 服务端(应用程序)一 ...
- BZOJ 1666: [Usaco2006 Oct]Another Cow Number Game 奶牛的数字游戏 幼儿园测试题
本来以为是一道数学题,一顿XJBT导式子,结果就是个幼儿园都会的模拟. Code: #include<bits/stdc++.h> #define ll long long using n ...
- When you hit a wall, just kick it in.
Teach Yourself Programming in Ten Years. ----- Peter Norvig Teach Yourself Programming in Ten Years ...
- pip是用代理
内网访问外网时,需要通过vpn访问,但是pip貌似不能是用vpn访问外网.直接度娘: windows下: set http_proxy=http://代理服务器:端口 不行可以试试下面的: set h ...
- Python爬虫4------图片爬虫
import urllib.request import re keyname="短裙" key=urllib.request.quote(keyname) headers=(&q ...
- Python数据结构1-----基本数据结构和collections系列
1.基本数据结构 整型.浮点型.字符串.元祖.列表.字典.集合 2.高级数据结构 (collections模块) (1)计数器(counter):对字典的补充,用于追踪值的出现次数. [具备字典所有的 ...
- Django用户认证(四)自定义认证Customizing authentication
原文:https://www.cnblogs.com/linxiyue/p/4061044.html 扩展已有的用户模型Extending the existing User model 有两种方法来 ...
- 仿照CIFAR-10数据集格式,制作自己的数据集
本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50801226 前一篇博客:C/C++ ...
- C#-WinForm中文本框的中文乱码问题
上面这句话可以解决textbox中的中文乱码问题 来自为知笔记(Wiz) 附件列表 QQ图片20151218124007.png
- RDIFramework.NET V2.9版本号 WinFom部分新增与修正的功能
RDIFramework.NET V2.9版本号 WinFom部分新增与修正的功能 转眼间RDIFramework.NET框架走了快6个年头了,随着一个版本号一个版本号的升级改造,如今已经越来越完美 ...