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. 洛谷 P3203 BZOJ 2002 [Hnoi2010]Bounce 弹飞绵羊

    题目描述 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿着一条直线摆上n个装置,每个装置设定初始弹力系 ...

  2. [luoguP1403] [AHOI2005]约数研究(这。。。)

    传送门 用类似筛法的原理,就好啦 ——代码 #include <cstdio> int n, ans; int a[1000001]; int main() { int i, j; sca ...

  3. C++标准库:bitset 用法整理&&zoj 3812

    转载: http://happyboy200032.blog.163.com/blog/static/46903113201291252033712/ 头文件:#include <bits/st ...

  4. [K/3Cloud] 表单python脚本使用QueryService的做法

    听说有些朋友想在表单里做自定义的界面数据处理,一般来说写个表单插件会很容易解决这类问题.但是鉴于C#插件开发的不便性和实施搭建开发环境的麻烦,在现场做C#开发可能会不太方便(没部署开发环境之类的问题) ...

  5. codevs1213 解的个数

    题目描述 Description 已知整数x,y满足如下面的条件: ax+by+c = 0 p<=x<=q r<=y<=s 求满足这些条件的x,y的个数. 输入描述 Input ...

  6. Spring MVC中@RequestMapping注解使用技巧(转)

    @RequestMapping是Spring Web应用程序中最常被用到的注解之一.这个注解会将HTTP请求映射到MVC和REST控制器的处理方法上. 在这篇文章中,你将会看到@RequestMapp ...

  7. WCF 配置文件中的MaxStringContentLength & MaxReceivedMessageSize

    中午测试员在测试系统模块时发现无法通过WCF从服务器下载数据,检查配置文件后,建议开发人员修改站点的WEB.CONFIG文件,具体修改对比如下: 旧的: <binding name=" ...

  8. 【APIO2012】【BZOJ2809】派遣dispatching

    2809: [Apio2012]dispatching Time Limit: 10 Sec Memory Limit: 128 MB Submit: 1932 Solved: 967 [Submit ...

  9. ssh连接失败

    参考:http://www.cnblogs.com/starof/p/4709805.html https://www.chenyudong.com/archives/ssh-using-privat ...

  10. Java中集合List,Map和Set的差别

    Java中集合List,Map和Set的差别 1.List和Set的父接口是Collection.而Map不是 2.List中的元素是有序的,能够反复的 3.Map是Key-Value映射关系,且Ke ...