bootstrap之旅 -- 快速体验

先解答一个网友的问题:

Q: css3中的media query在任何浏览器中没有用?

A:其实css3一直是ie9之后才陆续支持的,webkit内核或firefox早就支持了。我们直接看效果吧

body部分就是一个<span>ni dong de</span>

css代码如下:


    /* 当浏览器的可视区域小于650px */
    @media screen and (max-width:650px){
        span{color:#f04040}
    }

直接看我chrome的效果:

上面这个截图来自chrome>>右击>>审查元素

然后点下小设备图标(这是开发跨屏网页必备工具!!),如下图:

media query是响应式布局的核心CSS3属性,想开发出一个跨设备的页面,该属性一定要掌握。

接下来我们快速入门Bootstrap,并体验一下它的demo

官方地址:http://getbootstrap.com/

目前最新版本:v3.3.1

bootstrap使用到的技术

Jquery(这个就不说了,bootstrap就是基于jquery,而且集成了一些常用好用的jquery插件)

Less/Sass (css编程化,一些共用的属性可以做成变量)

Grunt (主要用来打包,css和js的压缩,监视less的改动自动生成css, 单元测试)

bootstrap目录结构 

源码的基本目录如下:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

bootstrap的demo

今天是快速体验,不细聊代码, 请自行下载源码。demo都在docs/examples这个目录下,常见的blog,dashboard,选项卡,图表,进度条,表格按钮等等样式应有尽有,随便贴几张截图,大家感受下:

相关文章

火龙果开发官方微信
更多干货!欢迎扫描上方二维码关注官方微信公众号(火龙果开发)
发表新评论