fcc 响应式框架Bootstrap 练习2
text-primary 属性值使标题直接变成了红色,text-center使标题直接居中
<h2 class="text-primary text-center">CatPhotoApp</h2>
img-responsive 使图片变成响应式自动调整大小适应屏幕
<img src="/images/running-cat.jpg" class="img-responsive">
将能用class属性值直接定义的样式来替代多余的css样式
"love" 放到 span
标签下。然后为其添加 class="text-danger" 来使文字变成红色
<p>Things cats
<span class="text-danger">love</span>:
</p>
为Cat Photo 应用做一个导航, 标题图片放在一行里
<div class="row">
<div class="col-xs-8"> <h2 class="text-primary text-center">CatPhotoApp</h2></div>
<div class="col-xs-4"> <a href="#"><img class="img-responsive thick-green-border" src="/images/relaxing-cat.jpg"></a></div>
</div>
图标库
Font Awesome 是一个非常方便的图标库。这些图标都是矢量图形,被保存在 .svg
的文件格式中。这些图标就和字体一样,可以通过像素单位指定它们的大小,
可以将 Font Awesome 图标库增添至任何一个应用中,方法很简单,只需要在 HTML 头部增加下列代码即可:
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
通过 Font Awesome 库增加一个 thumbs-up
图标到你的 like 按钮中,方法是在i
元素中增加 class 属性 fa
和 fa-thumbs-up,
i
元素起初一般是让其它元素有斜体(italic)的功能,不过现在一般用来指代图标
<button class="btn btn-block btn-primary">
<i class="fa fa-thumbs-up"></i>Like
</button>
将 Bootstrap 的 col-xs-*
用在 form
元素中。这样的话,我们的单选按钮就可以均匀地在页面上展开,不需要知道屏幕的分辨率有多宽
<form action="/submit-cat-photo">
<div class="row">
<div class="col-xs-6"> <label><input type="radio" name="indoor-outdoor"> Indoor</label></div>
<div class="col-xs-6"> <label><input type="radio" name="indoor-outdoor"> Outdoor</label></div>
</div>
</form>
为输入文本框增加属性class="form-control" 来增加框100%宽度
提交按钮增加属性class="btn btn-primary"变成红色,增加i元素添加图标
<input type="text" class="form-control" placeholder="cat photo URL" required >
<button type="submit" class="btn btn-primary">
<i class="fa fa-paper-plane"></i>
Submit
</button>
91
fcc 响应式框架Bootstrap 练习2的更多相关文章
- fcc 响应式框架Bootstrap 练习1
需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中: <link rel="stylesheet" href="//cdn.bootcss ...
- 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 364A】Matrix
[链接] 我是链接,点我呀:) [题意] 让你求出b[i][j]=s[i]*s[j]规则构成的矩阵 的所有子矩阵中子矩阵的和为a的子矩阵的个数 [题解] (x,y,z,t) 会发现它的和就是sum(x ...
- 52. spring boot日志升级篇—log4j多环境不同日志级别的控制【从零开始学Spring Boot】
在上一章节中我们介绍了,仅通过log4j-spring.properties对日志级别进行控制,对于需要多环境部署的环境不是很方便,可能我们在开发环境大部分模块需要采用DEBUG级别,在测试环境可能需 ...
- 零基础到架构师 不花钱学JavaEE(基础篇)- 概述
Java简单来说是一门语言,Java能干什么? 网站:开发大,中,小型网站. 服务器端程序:企业级程序开发. APP:Android的APP基本使用Java开发. 云:Hadoop就是使用Java语言 ...
- 人人都是 DBA
http://www.cnblogs.com/gaochundong/tag/DBA/
- 中间件解析FDMEMTABLE.delta生成SQL的方法
遍历Delta.DataView.Rows,Delta.DataView.Rows是记录的行集,由行组成 TFDDatSRow,即是一行记录的对象 TFDDatSRow的方法: GetData(), ...
- UVA 10555 - Dead Fraction(数论+无限循环小数)
UVA 10555 - Dead Fraction 题目链接 题意:给定一个循环小数,不确定循环节,求出该小数用分数表示,而且分母最小的情况 思路:推个小公式 一个小数0.aaaaabbb... 表示 ...
- LeetCode OJ 322. Coin Change DP求解
题目链接:https://leetcode.com/problems/coin-change/ 322. Coin Change My Submissions Question Total Accep ...
- 关于C语言指针的一些新认识(1)
Technorati 标签: 指针,数组,汇编,C语言 前言 指针是C语言的精华,但我对它一直有种敬而远之的感觉,因为一个不小心就可能让你的程序陷入莫名其妙的麻烦之中.所以,在处理字符串时,我总是能用 ...
- POJ 1300 Door Man(欧拉通路)
题目描写叙述: 你是一座大庄园的管家. 庄园有非常多房间,编号为 0.1.2.3..... 你的主人是一个心不在 焉的人,常常沿着走廊任意地把房间的门打开.多年来,你掌握了一个诀窍:沿着一个通道,穿 ...
- IT痴汉的工作现状22-由Dalvik虚拟机引发的口水战
Dalvik是啥呢? 从未知道冰岛有Dalvik这么一个重要的村庄.直到Dan Bornstein将自己为Android系统编写的进程虚拟机命名为Dalvik后才被我所知. 它是Android系统独有 ...