fcc 响应式框架Bootstrap 练习1
需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中:
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
再把html元素都放到div元素中
<img class="img-responsive" src="/images/running-cat.jpg">
<h2 class="red-text text-center">CatPhotoApp</h2> text-center不用写样式自动会使h2 居中
<button class="btn btn-block btn-primary">Like</button>创建按钮 ,加入btn-block不用写样式,按钮自动成为块级元素,会伸展并填满页面整个水平空间,任何在它之下的元素都会跟着浮动至该区块的下一行,
加入btn btn-primary自动变成浅蓝色
<div class="row"> 三个按钮排成一行
<div class="col-xs-4"> <button class="btn btn-block btn-primary">Like</button> </div>
<div class="col-xs-4"> <button class="btn btn-block btn-info">Info</button> </div>
<div class="col-xs-4"><button class="btn btn-block btn-danger">Delete</button> </div>
</div> 每个按钮的大小xs较小的,如手机屏,md中等的大小如笔记本电脑,数字代表所占的列宽
82
fcc 响应式框架Bootstrap 练习1的更多相关文章
- fcc 响应式框架Bootstrap 练习2
text-primary 属性值使标题直接变成了红色,text-center使标题直接居中 <h2 class="text-primary text-center"> ...
- fcc 响应式框架Bootstrap 练习3
class="container-fluid"控制宽度100% <div class="container-fluid"> <h3 class ...
- 响应式框架Bootstrap
概念:Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 -- 强调 响应式设计的概念. 通过响应式设计,你无需再为你的网站设计一个手机版的.它在任何尺寸的屏幕上看起来都会不错. Boo ...
- 响应式框架Bootstrap栅格系统
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8&qu ...
- .NET Core的响应式框架,基于Ace Admin框架菜单导航,Bootstrap布局,fontAwesome图标,内嵌Iframe用EasyUI做数据绑定,动态配置列表,动态配置表单
netnrf 响应式框架 用于快速开发的响应式框架 演示:https://rf2.netnr.com v3.x 前端采用 jQuery + Bootstrap + EasyUI + AceAdmin ...
- 15个最好的HTML5前端响应式框架(2014)
文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表编程语言,它能够编绎成CSS,可复用CSS代码,声明变量,甚至是函数,类Ruby/Python的语法.參见: LESS vs SA ...
- 一个响应式框架——agera
Google在上周开源了一个响应式框架——agera,相信它会慢慢地被广大程序员所熟知.我个人对这样的技术是很感兴趣的,在这之前也研究过RxJava,所以在得知Google开源了这样的框架之后第一时间 ...
- 美团客户端响应式框架EasyReact开源啦
前言 EasyReact 是一款基于响应式编程范式的客户端开发框架,开发者可以使用此框架轻松地解决客户端的异步问题. 目前 EasyReact 已在美团和大众点评客户端的部分业务中进行了实践,并且持续 ...
- 强大又简单的响应式框架——Foundation 网格系统
前端框架——Foundation 简介 Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架. Foundation 是一个易用.强大而且 ...
随机推荐
- Codeforces Round #240 (Div. 2) C Mashmokh and Numbers
, a2, ..., an such that his boss will score exactly k points. Also Mashmokh can't memorize too huge ...
- noip模拟赛 whzzt-Confidence
分析:做着感觉像脑筋急转弯一样......因为空间的限制,存不下每一个数,所以用数学方法来解. 设t1=Σai - Σbi = aj - bj,t2=Σi*ai - Σi*bi = j*(aj - b ...
- zoj 3812 状压dp
转载:http://blog.csdn.net/qian99/article/details/39138329 题意:给出n个物品,每个物品有两种属性Wi,Ti,有q组查询,每组查询要求在n个物品中选 ...
- T1082 线段树练习3 codevs
http://codevs.cn/problem/1082/ 题目描述 Description 给你N个数,有两种操作: 1:给区间[a,b]的所有数增加X 2:询问区间[a,b]的数的和. 输入描述 ...
- 线程调度策略SCHED_RR(轮转法)和SCHED_FIFO(先进先出)之对照
我们在用pthread创建线程时,能够指定调度策略policy--SCHED_OTHER(默认).SCHED_RR和SCHED_FIFO.这里TALK一下两个实时策略--SCHED_RR和SCHED_ ...
- Bitmap工具类BitmapHelper
BitmapHelper 提供一些获取本地缩略图,获取网络图片.dp与px的相互转换等方法. import java.io.ByteArrayInputStream; import java.io.B ...
- 【http代理报文】自己开发HTTP代理工具,不限语种。
我们知道通过修改浏览器设置可以使用代理访问网页,其实这个操作就是修改了每次的HTTP头. 工作中,我们难免需要通过TCP/IP协议发送HTTP报文来直接请求网页内容(比如爬虫工具),有同学问如何通过H ...
- ALSA声卡驱动中的DAPM详解之四:在驱动程序中初始化并注册widget和route
前几篇文章我们从dapm的数据结构入手,了解了代表音频控件的widget,代表连接路径的route以及用于连接两个widget的path.之前都是一些概念的讲解以及对数据结构中各个字段的说明,从本章开 ...
- YTU 2782: 用数字造数字
2782: 用数字造数字 时间限制: 1 Sec 内存限制: 128 MB 提交: 191 解决: 160 题目描述 输入一个3位以上的整数,求其中最大的数字最小的数字之间的差.例如:输入8729 ...
- B1299 [LLH邀请赛]巧克力棒 博弈论
这个题一看就是nim游戏的变形.每次先手取出巧克力就是新建一个nim,但假如先手取一个为0的而且无论后手怎么取剩下的都无法为零就行了.然后用dfs跑. 题干: Description TBL和X用巧克 ...