Bookstrap4 学习(一)
容器
container 是最基本的lagyout 元素, 并且当使用默认的Grid 系统时, containers 是必须的.
<div class="container">
<!-- Content here -->
</div>
使用 .container-fluid 获取一个全宽的容器.
<div class="container-fluid">
...
</div>
下面讲到网格的时候会有例子可以这两个的区别
响应节点
为适应不同的屏幕大小,当界面变化时进行特定界面变化.bootstrap 定义了一些屏幕大小.分别对应 : sm , md , lg , xl , (英文单词).
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... } // Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) { ... } // Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... } // Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... } // Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
假如我们需要在css文件中指定某个特定的屏幕大小的属性.如下
@media screen and (min-width: 992px) {
.nav-btn button {
font-size: 24px;
padding:4px 8px;
line-height: 7;
border:none;
background: none;
outline:none;
}
}
注: min 和 max 就像数学中的上下限.
网格
bootstrap 分为12 个网格,
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
row 中管理着是三个col, 上面代码三个col平分了整个row, –sm 是什么意思呢? 就是在屏幕尺寸在sm及以上的都是平分的,而小于它的将会从上往下排
把container 换成是 container-fluid ,可以看到屏幕宽度被均匀铺满,而container 是水平居中.网格中需要注意的有:
- container 和 container-fluid 的区别
- col间有间隙,可以通过设定属性,消除间隙,见下例子.
- 在grid layuot 中内容必须放在col 中, row 管理着 col
<div class="container">
<div class="row ">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Bookstrap4 学习(一)的更多相关文章
- 从直播编程到直播教育:LiveEdu.tv开启多元化的在线学习直播时代
2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...
- Angular2学习笔记(1)
Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...
- ABP入门系列(1)——学习Abp框架之实操演练
作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...
- 消息队列——RabbitMQ学习笔记
消息队列--RabbitMQ学习笔记 1. 写在前面 昨天简单学习了一个消息队列项目--RabbitMQ,今天趁热打铁,将学到的东西记录下来. 学习的资料主要是官网给出的6个基本的消息发送/接收模型, ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Unity3d学习 制作地形
这周学习了如何在unity中制作地形,就是在一个Terrain的对象上盖几座小山,在山底种几棵树,那就讲一下如何完成上述内容. 1.在新键得项目的游戏的Hierarchy目录中新键一个Terrain对 ...
- 《Django By Example》第四章 中文 翻译 (个人学习,渣翻)
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...
- 菜鸟Python学习笔记第一天:关于一些函数库的使用
2017年1月3日 星期二 大一学习一门新的计算机语言真的很难,有时候连函数拼写出错查错都能查半天,没办法,谁让我英语太渣. 关于计算机语言的学习我想还是从C语言学习开始为好,Python有很多语言的 ...
- 多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类)
前言:刚学习了一段机器学习,最近需要重构一个java项目,又赶过来看java.大多是线程代码,没办法,那时候总觉得多线程是个很难的部分很少用到,所以一直没下决定去啃,那些年留下的坑,总是得自己跳进去填 ...
随机推荐
- CSS:如何清除a标签之间的默认留白间距
即使我们使用了类似 *{margin: 0;padding: 0;} 这样的代码重置了浏览器默认样式,也会发现类似<a>标签这种inline-block元素,它们之间也还存在着间距. de ...
- 「AH2017/HNOI2017」礼物
题目链接 戳我 \(Solution\) 应为我们可以将任意一个数列加上一个非负整数,即可以变为将一个数列加上一个整数(可以为负),我们将这个整数设为\(z\).所以要求的式子的变为: \[\sum_ ...
- 数数(高维DP)
T1 数数 [问题描述] fadbec 很善于数数,⽐如他会数将 a 个红球,b 个黄球,c 个蓝球,d 个绿球排成⼀列,任意相邻不同⾊的数⽬. 现在 R 君不知道 fadbec 数的对不对,想让你也 ...
- 如何获得Android设备名称(ADB命令详细介绍)
豌豆荚.360手机管家等软件可以获取android设备名称,显示在界面上,如下图: 我们自己如何来获取设备名称 呢?答案如下: 在命令行中输入“adb shell”进入shell之后,再输入“cat ...
- Rabbitmq消息服务器通讯异常: name must not be blank
前人挖坑,后人填! 倒霉的遇到一个破项目,该 项目使用了 RabbitMQ 消息队列向服务器发送消息, 但在发送中老是报 RabbitMQ 服务器异常! 呃,查看了服务器,服务器好好的,日志中却是这样 ...
- 洛谷P4220 [WC2018]通道(边分治+虚树)
题面 传送门 题解 代码不就百来行么也不算很长丫 虽然这题随机化贪心就可以过而且速度和正解差不多不过我们还是要好好学正解 前置芝士 边分治 米娜应该都知道点分治是个什么东西,而边分治,顾名思义就是对边 ...
- [ActionScript 3.0] 绘制扇形方法
/** * 绘制扇形 * @param mc 承载扇形的对象 * @param x 圆心角x * @param y 圆心角y * @param r 半径 * @param angle 绘制角度 * @ ...
- Ehcache和MemCached区别及应用
ehcache是纯Java编写的,通信是通过RMI方式,适用于基于java技术的项目.memcached服务器端是c编写的,客户端有多个语言的实现,如c,PHP(淘宝,sina等各大门户网站),Pyt ...
- To 高一
Linux 坑待填 Special Judge 什么是 Special Judge?有的题目会让你输出任意一个解即可AC,或者是让你输出部分答案能取得本测试点部分得分,或者是按照方案的优秀程度给你分, ...
- Saiku2.6 配置数据源
把连接字符串和Schema文件放这里.