FreeCodeCamp 学习笔记(二)响应式框架bootstrap

响应式设计:

添加:<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type=“text/css”>

<img> 添加 img-responsive class 属性使图片宽度适应屏幕宽度

文本 添加 text-center class属性使文本居中

<button> 添加 btn class属性使按钮为 bootstrap 的自带按钮样式


<button> class :

btn-block: 使按钮填满整个水平空间

btn-primary: 使按钮设为默认的深蓝色

btn-info: 使按钮设为提示的浅蓝色

btn-danger: 使按钮设为警告的红色


响应式网格布局:

设置 class 属性:(一般设置于 <div> 中)

需要先设置一个class=“row”<div>,在其中定义一行中每个列元素

对每个列元素设置 class : col-md-*     col-xs-*

md适用于屏幕宽度中等的设备(如笔记本电脑)

xs适用于屏幕宽度较小的设备(如手机)

*需要填数字,表示每个元素所占的列宽


通过div创建块级元素,通过span创建行内元素


引入 Font Awesome 图标库:

<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

<i> 图标元素 

添加class属性:fa fa-****-**


container container-fluid 容器的区别:

container 类用于固定宽度并支持响应式布局的容器

   - 所谓固定宽度并不是开发者自定义的宽度,而是 bootstrap 内部通过媒体查询获得屏幕宽度,自动将宽度设为某个固定值

container-fluid 类用于100%宽度,占据全部视口的容器

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值