第5模块闯关Bootstrap
- “行(row)”必须包含在
.container
(固定宽度)或.container-fluid
(100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。 - 通过“行(row)”在水平方向创建一组“列(column)”。
- 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
- 类似
.row
和.col-xs-4
这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 - 通过为“列(column)”设置
padding
属性,从而创建列与列之间的间隔(gutter)。通过为.row
元素设置负值margin
从而抵消掉为.container
元素设置的padding
,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding
。 - 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
- 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个
.col-xs-4
来创建。 - 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
- 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何
.col-md-*
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何.col-lg-*
不存在, 也影响大屏幕设备。 /* 小屏幕(平板,大于等于 768px) */
@media (min-width: @screen-sm-min) { ... } /* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: @screen-md-min) { ... } /* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }我们偶尔也会在媒体查询代码中包含
max-width
从而将 CSS 的影响限制在更小范围的屏幕大小之内。Copy@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px) 栅格系统行为 总是水平排列 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C .container
最大宽度None (自动) 750px 970px 1170px 类前缀 .col-xs-
.col-sm-
.col-md-
.col-lg-
列(column)数 12 最大列(column)宽 自动 ~62px ~81px ~97px 槽(gutter)宽 30px (每列左右均有 15px) 可嵌套 是 偏移(Offsets) 是 列排序 是
将最外面的布局元素 .container
修改为 .container-fluid
,就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
使用 .col-md-offset-*
类可以将列向右侧偏移。这些类实际是通过使用 *
选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4
类将 .col-md-4
元素向右侧偏移了4个列(column)的宽度
列排序
通过使用 .col-md-push-*
和 .col-md-pull-*
类就可以很容易的改变列(column)的顺序。
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
在标题内还可以包含 <small>
标签或赋予 .small
类的元素,可以用来标记副标题。
在标题内还可以包含 <small> 标签或赋予 .small 类的元素,可以用来标记副标题。
页面主体
Bootstrap 将全局 font-size
设置为 14px,line-height
设置为 1.428。这些属性直接赋予 <body>
元素和所有段落元素。另外,<p>
(段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。
内联文本元素
Marked text
For highlighting a run of text due to its relevance in another context, use the <mark>
tag.
You can use the mark tag to highlight text.
You can use the mark tag to <mark>highlight</mark> text.
被删除的文本
对于被删除的文本使用 <del>
标签。
This line of text is meant to be treated as deleted text.
<del>This line of text is meant to be treated as deleted text.</del>
无用文本
对于没用的文本使用 <s>
标签。
This line of text is meant to be treated as no longer accurate.
<s>This line of text is meant to be treated as no longer accurate.</s>
插入文本
额外插入的文本使用 <ins>
标签。
This line of text is meant to be treated as an addition to the document.
<ins>This line of text is meant to be treated as an addition to the document.</ins>
带下划线的文本
为文本添加下划线,使用 <u>
标签。
This line of text will render as underlined
<u>This line of text will render as underlined</u>
利用 HTML 自带的表示强调意味的标签来为文本增添少量样式。
小号文本
对于不需要强调的inline或block类型的文本,使用 <small>
标签包裹,其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 <small>
元素被设置不同的 font-size
。
你还可以为行内元素赋予 .small
类以代替任何 <small>
元素。
This line of text is meant to be treated as fine print.
<small>This line of text is meant to be treated as fine print.</small>
着重
通过增加 font-weight 值强调一段文本。
The following snippet of text is rendered as bold text.
<strong>rendered as bold text</strong>
斜体
用斜体强调一段文本。
The following snippet of text is rendered as italicized text.
<em>rendered as italicized text</em>
对齐
通过文本对齐类,可以简单方便的将文字重新对齐。
Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
No wrap text.
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
改变大小写
通过这几个类可以改变文本的大小写。
lowercased text.
UPPERCASED TEXT.
Capitalized Text.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
第5模块闯关Bootstrap的更多相关文章
- 第5模块闯关CSS练习题
1.列举你知道的css选择器? 说道css选择器,大家都知道有许多种,但是真要你去掰着手指头数一数的话,你可能需要数几分钟.其实这么多选择器,完全可以分为两类: 标签选择器(*是特殊情况),可但标签, ...
- W3CSchool闯关笔记(Bootstrap)
该闯关内容与JS闯关衔接. 每一题的答案均在注释处, 第一关:把所有的HTML内容放在一个包含有container-fluid的class名称的div下(注意,是所有的HTML内容,style标签属于 ...
- python 闯关之路四(下)(并发编程与数据库编程) 并发编程重点
python 闯关之路四(下)(并发编程与数据库编程) 并发编程重点: 1 2 3 4 5 6 7 并发编程:线程.进程.队列.IO多路模型 操作系统工作原理介绍.线程.进程演化史.特点.区别 ...
- C#设计模式开启闯关之路
前言背景 这是一条望不到尽头的编程之路,自踏入编程之路开始.就面临着各式各样的挑战,而我们也需要不断的挑战自己.不断学习充实自己.打好坚实的基础.以使我们可以走的更远.刚踏入编程的时候.根据需求编程, ...
- sql-lib闯关11-20关
从第11关开始,我们就进入到了POST注入的世界了. POSTpost是一种数据提交方式,它主要是指数据从客户端提交到服务器端,例如,我们常常使用的用户登录模块.网站的留言板模块等,在这些功能模块中我 ...
- CTFhub-WEB前置-http协议闯关
前情提要: 在渗透学习过程中,web的基础知识很重要,在这里通过long long ago之前学习的http基础,并结合网上的CTFhub--WEB前置之http协议闯关,对web基础知识进行加固并查 ...
- 网页闯关游戏(riddle webgame)--H5刮刮卡的原理和实践
前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 对于刮刮卡, 想必大家都很熟悉, 也很喜 ...
- 网页闯关游戏(riddle webgame)--SQL注入的潘多拉魔盒
前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. web开发初学者往往会忽视一些常见的漏洞 ...
- 网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 本文讲描述, 如何在网页端实现一个仿微信 ...
随机推荐
- IOS KVO的实现原理
#import "HMViewController.h" #import "HMPerson.h" @interface HMViewController () ...
- django使用orm方式查询mogodb的某段时间的值
在使用djgango时,需要在数据表中过滤出在某段时间的内容,网上很多或者说Django的orm是针对mysql,且字段类型是datetime或者其他时间类型,使用__rang这个函数就可以查询某个时 ...
- (第三场) H Diff-prime Pairs 【数论-素数线性筛法+YY】
题目链接 题目描述 Eddy has solved lots of problem involving calculating the number of coprime pairs within s ...
- 2018.9.28 典型for循环特殊理解及其二维数组的理解
如果for里面换成了函数结果会是怎么样呢?下面就来介绍一下 package praDemo; public class Test { public static boolean foo(char c) ...
- EF Ccore 主从配置 最简化
业务需要 配置一主多从数据库 读写分离 orm用的ef core , 把思路和代码写下 1. 配置2个数据库上下文 ETMasterContext ETSlaveContext(把增删改功能禁用掉 ...
- 五、设置 IntelliJ IDEA 主题和字体的方法
我们已经用 IntelliJ IDEA 创建了第一个 Java 项目 HelloWorld,如下图所示: 观察上图,大家有没有发现一些问题,例如,整个界面的字体是不是都太小了一点啊?不知道大家感受如何 ...
- maven学习记录四——私服 nexus
8 私服 nexus 安装nexus 启动服务 启动失败的解决方法: 登录nexus 用户名/密码 admin/admin123 仓库类型 Virtual 虚拟仓库 Proxy 代 ...
- spring异常+自定义以及使用
1.首先自定义异常 DataException: package com.wbg.maven1128.exception; public class DataException extends Exc ...
- php常见的几种排序以及二分法查找
<?php 1.插入排序 思想: 每次将一个待排序的数据元素插入到前面已经排好序的数列中,使数列依然有序,知道待排序数据元素全部插入完为止. 示例: [初始关键字] [49] 38 65 97 ...
- 涉及自制系统AS的几个协议总结
IGP(Interior Gateway Protocol): 内部网关协议的总称:其下有RIP和OSPF EGP(External Gateway Protocol): 外部网关协议的总称:目前使用 ...