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 是一个易用.强大而且 ...
随机推荐
- 吧,其实spring自带的BeanUtils就有这样的功能,引入spring-beans和spring-core之后,就有BeanUtils.copyProperties(a, b);可以实现两个javabean之间的相互拷贝,自己写的就当是研究咯---https://www.cnblogs.com/NieXiaoHui/p/7150928.html
吧,其实spring自带的BeanUtils就有这样的功能,引入spring-beans和spring-core之后,就有BeanUtils.copyProperties(a, b);可以实现两个ja ...
- JavaScript 读取CSV文件并转为js对象
html部分 <!-- 创建隐藏file input --><button type="button" name="seach" onclic ...
- 使用深度双向LSTM模型构造社区问答系统
所看到的. 首先强调一下,这个结构也是一个解决对照两个句子类似性的通用RNN解决方式,不只能够使用在问答社区.凡是涉及到对照两个句子或者实体关系的场合全然能够套用这个模型来解决.这点希望读者注意. 首 ...
- [Vue-rx] Switch to a Function which Creates Observables with Vue.js and Rxjs
Wrapping the creation of an Observable inside of a Function allows you delay the creation of the Obs ...
- Android View measure (三) 经常用法
ViewGroup.measureChildren() ViewGroup.measureChild() ViewGroup.measureChildWithMargins() /** * Ask o ...
- Oracle Temp 表空间切换
一.TEMP表空间作用 暂时表空间主要用途是在数据库进行排序运算.管理索引.訪问视图等操作时提供暂时的运算空间,当运算完毕之后系统会自己主动清理.当 oracle 里须要用到 sort 的时候. PG ...
- Android离线语音识别(PocketSphinx)
近期做项目.用到离线语音识别.整了好久,查了好多方法.最终完毕.网上资料有点乱,并且大部分就是那几个人写的.一群人转!以下我总结一下.也为后来人行个方便. 关于环境配置我就不多说了.我就是依照这个教程 ...
- leetCode 60.Permutation Sequence (排列序列) 解题思路和方法
The set [1,2,3,-,n] contains a total of n! unique permutations. By listing and labeling all of the p ...
- 【网络流】 HDU 3468 Treasure Hunting
题意: A-Z&&a-z 表示 集结点 从A点出发经过 最短步数 走到下一个集结点(A的下一个集结点为B ,Z的下一个集结点为a) 的路上遇到金子(*)则能够捡走(一个点仅仅能捡一次) ...
- 将ppt转换成PDF
import sys import os import glob import win32com.client def convert(files, formatType = 32): powerpo ...