一、Bootstarp

Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。可以让你快速的排版,不用在写那些繁杂的样式。Bootstrap是开源免费的,设计人员可以方便的从网上下载最新的版本。Bootstrap 源码里包含预先编译的CSS、JavaScript 和图标字体文件以及LESS、JavaScript 和文档的源码。

二、学完Bootstarp4的一些通用工具的记录

1.边框的设置

添加边框属性,显示指定边框。
(注意看边框的效果时需要加上内容)
效果图如下:

<span class="border">这是内容</span>
<span class="border-top">这是内容</span>
<span class="border-right">这是内容</span>
<span class="border-bottom">这是内容</span>
<span class="border-left">这是内容</span> <span class="border border-primary">这是内容</span>(设置边框的颜色)
("border-primary"是边框的颜色)
使用.rounded元素可以轻松的定义四个圆角的孤度及显示效果。

2.颜色设置

效果图如下:

代码如下:

<p class="text-primary">.text-primary</p>浅蓝色
<p class="text-secondary">.text-secondary</p>黑色
<p class="text-success">.text-success</p>绿色
<p class="text-danger">.text-danger</p>红色
<p class="text-warning">.text-warning</p>黄色
<p class="text-info">.text-info</p>深蓝色
不一一列举

使用颜色样式,在链接上也能正常使用(呈现), 注意:e .text-white 、 .text-muted这两个 class样式不支持链接上使用(没有链接样式)。

三、网格系统

<1>.Bootstrap 4 网格系统有以下 5 个类:

  • col- 针对所有设备
  • col-sm- 平板 - 屏幕宽度等于或大于 576px
  • col-md- 桌面显示器 - 屏幕宽度等于或大于 768px
  • col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px
  • col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px

<2>.基本的样式
效果图如下

代码如下

<div class="container-fluid">(container-fluid"是控制网页内容和body的留白)
<div class="row">
<div class="col" style="background-color:lavender;">.first</div>
<div class="col" style="background-color:orange;">.second</div>
<div class="col" style="background-color:lavender;">.third</div>
</div>
</div>

以上只是Bootstarp中的一点点,还有很多。

一片关于Bootstarp4的文章的更多相关文章

  1. C# 文章导航

    1. C#相关文章 1.1 C# 基础(一) 访问修饰符.ref与out.标志枚举等等 1.2 C# 基础(二) 类与接口 1.3 C# DateTime日期格式化 1.4 C# DateTime与时 ...

  2. 分布式系列文章——Paxos算法原理与推导

    Paxos算法在分布式领域具有非常重要的地位.但是Paxos算法有两个比较明显的缺点:1.难以理解 2.工程实现更难. 网上有很多讲解Paxos算法的文章,但是质量参差不齐.看了很多关于Paxos的资 ...

  3. 基于DDD的现代ASP.NET开发框架--ABP系列文章总目录

    ABP相关岗位招聘:给热爱.NET新技术和ABP框架的朋友带来一个高薪的工作机会 ABP交流会录像视频:ABP架构设计交流群-7月18日上海线下交流会的内容分享(有高清录像视频的链接) 代码自动生成: ...

  4. 有朋友问了数据库ID不连续,怎么获取上一篇和下一篇的文章?(不是所有情况都适用)

    呃 (⊙o⊙)…,逆天好久没写SQL了,EF用的时间长了,SQL都不怎么熟悉了......[SQL水平比较菜,大牛勿喷] 方法很多种,说个最常见的处理 因为id是自增长的,所以一般情况下下一篇文章的I ...

  5. iOS系列文章

    本博客全为原创,如果借鉴了其他文章会在博文的下面进行说明.欢迎转载,但要在文章中给出原文链接,谢谢. 有链接的说明已经发布,没有链接的说明还没有发布. 并不是所有的博文都在这里罗列,有兴趣的可以看博客 ...

  6. 【NLP】蓦然回首:谈谈学习模型的评估系列文章(一)

    统计角度窥视模型概念 作者:白宁超 2016年7月18日17:18:43 摘要:写本文的初衷源于基于HMM模型序列标注的一个实验,实验完成之后,迫切想知道采用的序列标注模型的好坏,有哪些指标可以度量. ...

  7. 【NLP】揭秘马尔可夫模型神秘面纱系列文章(一)

    初识马尔可夫和马尔可夫链 作者:白宁超 2016年7月10日20:34:20 摘要:最早接触马尔可夫模型的定义源于吴军先生<数学之美>一书,起初觉得深奥难懂且无什么用场.直到学习自然语言处 ...

  8. 在知乎上看到 Web Socket这篇文章讲得确实挺好,从头看到尾都非常形象生动,一口气看完,没有半点模糊,非常不错

    在知乎上看到这篇文章讲得确实挺好,从头看到尾都非常形象生动,一口气看完,没有半点模糊,非常不错,所以推荐给大家,非常值得一读. 作者:Ovear链接:https://www.zhihu.com/que ...

  9. 【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第十二节)

    好的,那么在上一节中呢,评论功能的后台已经写好了,这一节,先把这部分后台代码和前台对接一下. 1.评论功能实现 我们修改一下保存评论按钮的点击事件,用jQuery的方式获取文本框中的值,然后通过aja ...

随机推荐

  1. win10 文件管理器频繁卡死

    参考: https://www.xitmi.com/1589.html

  2. Python笔记(二十)_多态、组合

    多态 对于函数中的变量,我们只需要知道它这个变量是什么类,无需确切地知道它的子类型,就可以放心地调用类的方法,而具体调用的这个方法是作用在父类对象还是子类对象上,由运行时该对象的确切类型决定,这就是多 ...

  3. SQL查询返回去除重复数据的结果集

    方法一: select * from  tablename  where  id   in   (select  id  from  tablename   group  by  id   havin ...

  4. Parentheses Sequence微软编程笔试

    描述 You are given a sequence S of parentheses. You are asked to insert into S as few parentheses as p ...

  5. CSS选择器,优先级的总结

    CSS选择器 css选择器种类 基本选择器: 通配符选择器 * id选择器 #id 类选择器 .className 元素选择器 E 元素后代选择器  E F 子元素选择器 E > F 相邻兄弟元 ...

  6. Page.IsPostBack

    ASP.NET页面的执行顺序说明:Page_Init(页面初始化引发的事件)——Page_Load(加载页面时引发的事件)——ControlEvent(服务器控件引发的事件)——Page_UnLoad ...

  7. 2019CCPC网络预选赛 1003 K-th occurrence 后缀自动机 + 二分 + 主席树

    题意:给你一个长度为n的字符串,有m次询问,每次询问l到r的子串在原串中第k次出现的位置,如果没有输出-1.n, m均为1e5级别. 思路:后悔没学后缀数组QAQ,其实只要学过后缀数组这个题还是比较好 ...

  8. java Random随机生成一个数

    package java05; import java.util.Random; /* Random随机生成一个数字 1.导包: import java.util.Random; 2.创建 Rando ...

  9. mysql官网下载安装

    1.官网下载zip压缩文件 2.解压到指定文件夹 3.配置环境变量 4.新建my.ini 5.管理员权限打开cmd命令行,mysqld install mysql,mysql --initialize ...

  10. openstack--all-in-one部署

    安装过程 本次宿主机(即安装OpenStack的机器)的操作系统是CentOS 7.5.安装的OpenStack是目前最新的rocky版本,官方文档建议机器至少有16 GB的内存,处理器硬件虚拟化扩展 ...