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 是一个易用.强大而且 ...
随机推荐
- 洛谷 P3203 BZOJ 2002 [Hnoi2010]Bounce 弹飞绵羊
题目描述 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿着一条直线摆上n个装置,每个装置设定初始弹力系 ...
- [luoguP1403] [AHOI2005]约数研究(这。。。)
传送门 用类似筛法的原理,就好啦 ——代码 #include <cstdio> int n, ans; int a[1000001]; int main() { int i, j; sca ...
- C++标准库:bitset 用法整理&&zoj 3812
转载: http://happyboy200032.blog.163.com/blog/static/46903113201291252033712/ 头文件:#include <bits/st ...
- [K/3Cloud] 表单python脚本使用QueryService的做法
听说有些朋友想在表单里做自定义的界面数据处理,一般来说写个表单插件会很容易解决这类问题.但是鉴于C#插件开发的不便性和实施搭建开发环境的麻烦,在现场做C#开发可能会不太方便(没部署开发环境之类的问题) ...
- codevs1213 解的个数
题目描述 Description 已知整数x,y满足如下面的条件: ax+by+c = 0 p<=x<=q r<=y<=s 求满足这些条件的x,y的个数. 输入描述 Input ...
- Spring MVC中@RequestMapping注解使用技巧(转)
@RequestMapping是Spring Web应用程序中最常被用到的注解之一.这个注解会将HTTP请求映射到MVC和REST控制器的处理方法上. 在这篇文章中,你将会看到@RequestMapp ...
- WCF 配置文件中的MaxStringContentLength & MaxReceivedMessageSize
中午测试员在测试系统模块时发现无法通过WCF从服务器下载数据,检查配置文件后,建议开发人员修改站点的WEB.CONFIG文件,具体修改对比如下: 旧的: <binding name=" ...
- 【APIO2012】【BZOJ2809】派遣dispatching
2809: [Apio2012]dispatching Time Limit: 10 Sec Memory Limit: 128 MB Submit: 1932 Solved: 967 [Submit ...
- ssh连接失败
参考:http://www.cnblogs.com/starof/p/4709805.html https://www.chenyudong.com/archives/ssh-using-privat ...
- Java中集合List,Map和Set的差别
Java中集合List,Map和Set的差别 1.List和Set的父接口是Collection.而Map不是 2.List中的元素是有序的,能够反复的 3.Map是Key-Value映射关系,且Ke ...