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 是一个易用.强大而且 ...
随机推荐
- Leetcode 79.单词搜索
单词搜索 给定一个二维网格和一个单词,找出该单词是否存在于网格中. 单词必须按照字母顺序,通过相邻的单元格内的字母构成,其中"相邻"单元格是那些水平相邻或垂直相邻的单元格.同一个单 ...
- HDU 1540 区间合并线段树
题目大意: 就是给定一堆位置,进行删除还原,最后找到 t 位置上的最大连续位置 #include <cstdio> #include <cstring> #include &l ...
- [luoguP1072] Hankson 的趣味题(数论)
传送门 由题意得 gcd(x, a0) = a1 ——> gcd(x / a1, a0 / a1) = 1 lcm(x, b0) = b1 ——> x * b0 / gcd(x, b0) ...
- 轰炸II
题目背景 本题为轰炸数据加强版 题目描述 一个城市遭到了M次轰炸,每次都炸了一个每条边都与边界平行的矩形 在轰炸后,有N个关键点,指挥官想知道,它们有没有受到过轰炸,如果有,被炸了几次,最后一次是第几 ...
- android安卓程序源码---高仿微信源码
先截几张图: 部份源代码如下所示: package cn.buaa.myweixin; import java.util.ArrayList; import android.os.Bundle; im ...
- 分析helo1项目中的 Web.xml
web.xml文件位于hello1 中target/WEB-INF/classes/javaeetutorial目录下. 这个web.xml文件包含Facelets应用程序所需的几个元素: 其中(1) ...
- Ubuntu 16.04安装NASM汇编IDE-SASM
在Linux下,尤其是Ubuntu,SASM工具应该是用来开发汇编最好用的IDE,小巧且支持调试.支持的编译器有:NASM, MASM, GAS, FASM. 安装步骤: 下载: http://dow ...
- Vue插槽的另外一些特性
之前有个项目,想判断一下,某一个模板内的插槽是否被使用. 不知道是不是问题过于简单,网上没有这方面的说明.我就抽时间验证一下vue插槽相关的一些功能. 然后写下这篇随笔,希望对后来人能有一些帮助. 简 ...
- LeetCode 804. Unique Morse Code Words (唯一摩尔斯密码词)
题目标签:String 题目给了我们 对应每一个 字母的 morse 密码,让我们从words 中 找出 有几个不同的 morse code 组合. 然后只要遍历 words,把每一个word 转换成 ...
- JAVA学习第二十一课(多线程(一)) - (初步了解)
放假在家,歇了好几天了,也没学习,今天学习一下多线程.找找感觉.后天就要回学校了.sad... PS:包 没有什么技术含量,会用就可以,日后开发就必需要会用啦,所以打算先放一放,先来多线程 一.多线程 ...