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. Leetcode 79.单词搜索

    单词搜索 给定一个二维网格和一个单词,找出该单词是否存在于网格中. 单词必须按照字母顺序,通过相邻的单元格内的字母构成,其中"相邻"单元格是那些水平相邻或垂直相邻的单元格.同一个单 ...

  2. HDU 1540 区间合并线段树

    题目大意: 就是给定一堆位置,进行删除还原,最后找到 t 位置上的最大连续位置 #include <cstdio> #include <cstring> #include &l ...

  3. [luoguP1072] Hankson 的趣味题(数论)

    传送门 由题意得 gcd(x, a0) = a1 ——> gcd(x / a1, a0 / a1) = 1 lcm(x, b0) = b1 ——> x * b0 / gcd(x, b0) ...

  4. 轰炸II

    题目背景 本题为轰炸数据加强版 题目描述 一个城市遭到了M次轰炸,每次都炸了一个每条边都与边界平行的矩形 在轰炸后,有N个关键点,指挥官想知道,它们有没有受到过轰炸,如果有,被炸了几次,最后一次是第几 ...

  5. android安卓程序源码---高仿微信源码

    先截几张图: 部份源代码如下所示: package cn.buaa.myweixin; import java.util.ArrayList; import android.os.Bundle; im ...

  6. 分析helo1项目中的 Web.xml

    web.xml文件位于hello1 中target/WEB-INF/classes/javaeetutorial目录下. 这个web.xml文件包含Facelets应用程序所需的几个元素: 其中(1) ...

  7. Ubuntu 16.04安装NASM汇编IDE-SASM

    在Linux下,尤其是Ubuntu,SASM工具应该是用来开发汇编最好用的IDE,小巧且支持调试.支持的编译器有:NASM, MASM, GAS, FASM. 安装步骤: 下载: http://dow ...

  8. Vue插槽的另外一些特性

    之前有个项目,想判断一下,某一个模板内的插槽是否被使用. 不知道是不是问题过于简单,网上没有这方面的说明.我就抽时间验证一下vue插槽相关的一些功能. 然后写下这篇随笔,希望对后来人能有一些帮助. 简 ...

  9. LeetCode 804. Unique Morse Code Words (唯一摩尔斯密码词)

    题目标签:String 题目给了我们 对应每一个 字母的 morse 密码,让我们从words 中 找出 有几个不同的 morse code 组合. 然后只要遍历 words,把每一个word 转换成 ...

  10. JAVA学习第二十一课(多线程(一)) - (初步了解)

    放假在家,歇了好几天了,也没学习,今天学习一下多线程.找找感觉.后天就要回学校了.sad... PS:包 没有什么技术含量,会用就可以,日后开发就必需要会用啦,所以打算先放一放,先来多线程 一.多线程 ...