文档章节

FreeCodeCamp - BootStrap Grid Span

保安队长
 保安队长
发布于 2017/03/12 19:37
字数 300
阅读 8
收藏 0

Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a div element. Here's a diagram of how Bootstrap's 12-column grid layout works:

输入图片说明

Note that in this illustration, the col-md-* class is being used. Here, md means medium, and * is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified. In the Cat Photo App that we're building, we'll use col-xs-*, where xs means extra small (like an extra-small mobile phone screen), and * is the number of columns specifying how many columns wide the element should be.

Put the Like, Info and Delete buttons side-by-side by nesting all three of them within one <div class="row"> element, then each of them within a <div class="col-xs-4"> element.

<div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary">Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info">Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger">Delete</button>
    </div>
  </div>
<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="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
        </a>
    </div>
</div>

You can use spans to create inline elements. Remember when we used the btn-block class to make the button fill the entire row? This image illustrates the difference between inline elements and block-level elements: 输入图片说明

By using the span element, you can put several elements together, and even style different parts of the same element differently.

<p>Things cats <span class="text-danger">love:</span></p>

© 著作权归作者所有

保安队长
粉丝 1
博文 25
码字总数 8881
作品 0
大连
程序员
私信 提问
被卡住了?这有一份程序员急救网站清单

1、谷歌 这应该是最常用(也是最好用)的解决编码问题的方式。你会惊讶于Google在寻找编码问题的解决方案方面有多么有用! 你可以通过Google筛选出大量资源,从博客,YouTube到StackOverflow...

实验楼
2018/07/23
0
0
程序员不容错过的5大有趣编程网站,你知道几个?

学编程最重要的是实践,就是写代码、看别人写的代码、再写代码。 要掌握编程这一门手艺,要经过大量的训练。 如果编程练习可以变得有趣,那你一定可以乐此不疲,长期坚持。 下面w3cschol分享...

W3Cschool
2018/04/12
0
0
猿生态十城巡回沙龙丨武汉站携手微软

微软的小冰机器人为什么会得到奶茶妹妹的青睐并命名? Cortana语音助手为什么会后来居上,超越苹果的Siri? Hololens全息眼镜为什么超越谷歌眼镜? 为什么要使用云端测试,而不是本地测试? ...

Miya
2016/09/20
261
1
猿生态十城巡回沙龙丨武汉站携手微软

微软的小冰机器人为什么会得到奶茶妹妹的青睐并命名? Cortana语音助手为什么会后来居上,超越苹果的Siri? Hololens全息眼镜为什么超越谷歌眼镜? 为什么要使用云端测试,而不是本地测试? ...

Miya
2016/09/20
10
0
2018 成都 Web 前端大会(freeCodeConf·成都)

活动信息 成都 Web 前端大会是 freeCodeCamp 成都社区一年一度举办的大型技术交流活动,主要面向西南地区 Web 应用、JavaScript 全栈开发领域的程序员、架构师、研发团队管理者和技术爱好者。...

FCC成都社区
2018/10/28
151
0

没有更多内容

加载失败,请刷新页面

加载更多

技术分享 | MySQL 8.0:字符集从 utf8 转换成 utf8mb4

作者:胡呈清 整理 MySQL 8.0 文档时发现一个变更:默认字符集由 latin1 变为 utf8mb4。想起以前整理过字符集转换文档,升级到 MySQL 8.0 后大概率会有字符集转换的需求,在此正好分享一下。...

爱可生
15分钟前
4
0
不管单机还是集群的限流实现已经给你准备好了

限流算法 计数器算法 维护一个counter,规定在单位时间内counter的大小不能超过最大值,每隔固定时间就将counter的值置零。如果这个counter大于设定的阈值,那么系统就拒绝请求 漏桶算法 维护...

阿提说说
27分钟前
4
0
文件管理

通过CLI登录进行文件管理 .表示当前目录,..表示父目录,具有隐藏文件。支持缩写与TAB键补全 1、目录操作 pwd#打印工作目录 cd <directory>#改变工作目录 dir [/all][<directory>]#查看目录内...

悠悠子佩
29分钟前
4
0
Netty学习笔记(10)——Netty中的Channel组件

1. Channel的功能 1. 与NIO中的Channel一样,它实现了网络操作的抽象类,聚合了一系列的网络IO功能,包括读写数据、建立连接、关闭连接等功能。通过外观模式,将数据读写、连接建立与断开等操...

江左煤郎
33分钟前
3
0
二叉树的深度

从根结点到叶结点依次经过的结点(含根、叶结点)形成树的一条路径,最长路径的长度为树的深度。 public int TreeDepth(TreeNode root) { return root == null ? 0 : 1 + Math.max(Tree...

Garphy
40分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部