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 属性 fafa-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的更多相关文章

  1. fcc 响应式框架Bootstrap 练习1

    需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中: <link rel="stylesheet" href="//cdn.bootcss ...

  2. fcc 响应式框架Bootstrap 练习3

    class="container-fluid"控制宽度100% <div class="container-fluid"> <h3 class ...

  3. 响应式框架Bootstrap

    概念:Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 -- 强调 响应式设计的概念. 通过响应式设计,你无需再为你的网站设计一个手机版的.它在任何尺寸的屏幕上看起来都会不错. Boo ...

  4. 响应式框架Bootstrap栅格系统

    <!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8&qu ...

  5. .NET Core的响应式框架,基于Ace Admin框架菜单导航,Bootstrap布局,fontAwesome图标,内嵌Iframe用EasyUI做数据绑定,动态配置列表,动态配置表单

    netnrf 响应式框架 用于快速开发的响应式框架 演示:https://rf2.netnr.com v3.x 前端采用 jQuery + Bootstrap + EasyUI + AceAdmin ...

  6. 15个最好的HTML5前端响应式框架(2014)

    文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表编程语言,它能够编绎成CSS,可复用CSS代码,声明变量,甚至是函数,类Ruby/Python的语法.參见: LESS vs SA ...

  7. 一个响应式框架——agera

    Google在上周开源了一个响应式框架——agera,相信它会慢慢地被广大程序员所熟知.我个人对这样的技术是很感兴趣的,在这之前也研究过RxJava,所以在得知Google开源了这样的框架之后第一时间 ...

  8. 美团客户端响应式框架EasyReact开源啦

    前言 EasyReact 是一款基于响应式编程范式的客户端开发框架,开发者可以使用此框架轻松地解决客户端的异步问题. 目前 EasyReact 已在美团和大众点评客户端的部分业务中进行了实践,并且持续 ...

  9. 强大又简单的响应式框架——Foundation 网格系统

          前端框架——Foundation     简介 Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架. Foundation 是一个易用.强大而且 ...

随机推荐

  1. 【Codeforces 364A】Matrix

    [链接] 我是链接,点我呀:) [题意] 让你求出b[i][j]=s[i]*s[j]规则构成的矩阵 的所有子矩阵中子矩阵的和为a的子矩阵的个数 [题解] (x,y,z,t) 会发现它的和就是sum(x ...

  2. 52. spring boot日志升级篇—log4j多环境不同日志级别的控制【从零开始学Spring Boot】

    在上一章节中我们介绍了,仅通过log4j-spring.properties对日志级别进行控制,对于需要多环境部署的环境不是很方便,可能我们在开发环境大部分模块需要采用DEBUG级别,在测试环境可能需 ...

  3. 零基础到架构师 不花钱学JavaEE(基础篇)- 概述

    Java简单来说是一门语言,Java能干什么? 网站:开发大,中,小型网站. 服务器端程序:企业级程序开发. APP:Android的APP基本使用Java开发. 云:Hadoop就是使用Java语言 ...

  4. 人人都是 DBA

    http://www.cnblogs.com/gaochundong/tag/DBA/

  5. 中间件解析FDMEMTABLE.delta生成SQL的方法

    遍历Delta.DataView.Rows,Delta.DataView.Rows是记录的行集,由行组成 TFDDatSRow,即是一行记录的对象 TFDDatSRow的方法:  GetData(), ...

  6. UVA 10555 - Dead Fraction(数论+无限循环小数)

    UVA 10555 - Dead Fraction 题目链接 题意:给定一个循环小数,不确定循环节,求出该小数用分数表示,而且分母最小的情况 思路:推个小公式 一个小数0.aaaaabbb... 表示 ...

  7. LeetCode OJ 322. Coin Change DP求解

    题目链接:https://leetcode.com/problems/coin-change/ 322. Coin Change My Submissions Question Total Accep ...

  8. 关于C语言指针的一些新认识(1)

    Technorati 标签: 指针,数组,汇编,C语言 前言 指针是C语言的精华,但我对它一直有种敬而远之的感觉,因为一个不小心就可能让你的程序陷入莫名其妙的麻烦之中.所以,在处理字符串时,我总是能用 ...

  9. POJ 1300 Door Man(欧拉通路)

    题目描写叙述: 你是一座大庄园的管家. 庄园有非常多房间,编号为 0.1.2.3..... 你的主人是一个心不在 焉的人,常常沿着走廊任意地把房间的门打开.多年来,你掌握了一个诀窍:沿着一个通道,穿 ...

  10. IT痴汉的工作现状22-由Dalvik虚拟机引发的口水战

    Dalvik是啥呢? 从未知道冰岛有Dalvik这么一个重要的村庄.直到Dan Bornstein将自己为Android系统编写的进程虚拟机命名为Dalvik后才被我所知. 它是Android系统独有 ...