资讯专栏INFORMATION COLUMN

一片关于Bootstarp4的文章

smartlion / 828人阅读

摘要:一是全球最受欢迎的前端组件库,用于开发响应式布局移动设备优先的项目。是开源免费的,设计人员可以方便的从网上下载最新的版本。源码里包含预先编译的和图标字体文件以及和文档的源码。二学完的一些通用工具的记录边框的设置添加边框属性,显示指定边框。

一、Bootstarp

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

二、学完Bootstarp4的一些通用工具的记录
1.边框的设置

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

这是内容
这是内容
这是内容
这是内容
这是内容

这是内容(设置边框的颜色)
("border-primary"是边框的颜色)
使用.rounded元素可以轻松的定义四个圆角的孤度及显示效果。
2.颜色设置

效果图如下:

代码如下:

.text-primary

浅蓝色

.text-secondary

黑色

.text-success

绿色

.text-danger

红色

.text-warning

黄色

.text-info

深蓝色 不一一列举

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

三、网格系统

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

col- 针对所有设备

col-sm- 平板 - 屏幕宽度等于或大于 576px

col-md- 桌面显示器 - 屏幕宽度等于或大于 768px

col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px

col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px

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

代码如下

(container-fluid"是控制网页内容和body的留白)
.first
.second
.third

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/52734.html

相关文章

  • 一片关于Bootstarp4文章

    摘要:一是全球最受欢迎的前端组件库,用于开发响应式布局移动设备优先的项目。是开源免费的,设计人员可以方便的从网上下载最新的版本。源码里包含预先编译的和图标字体文件以及和文档的源码。二学完的一些通用工具的记录边框的设置添加边框属性,显示指定边框。 一、Bootstarp Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。可以让你快速的排版,不用...

    张巨伟 评论0 收藏0
  • 学习express.js源代码方法

    摘要:学习的源代码的好处自然不少。阅读源代码可以帮你实现你的好奇心。本文会推荐一些的源代码分析文章,可以帮助更快的,更加全方位的理解研读之。 尽管有Hapi,Koa等有力的竞争者,express.js依然是非常流行的nodejs web服务器框架,毕竟它早于2007年就已经在开发了。 学习expressjs的源代码的好处自然不少。 它可以帮你深刻理解HTTP协议,这个协议是做前端后端都必然需...

    huaixiaoz 评论0 收藏0
  • 你知道前端对图片处理方式吗?

    摘要:对于第二种存储方式,我们前端需要将其二进制流交由对象处理,然后通过的生成临时赋值给属性来显示。当后端返回特定的图片二进制流的时候,就像我第一里的情景再现说的,前端用容器接收。 前言 作为前端工程师 de 我们,日常少不了会跟图片打交道。在各大电商平台工作的前端工程师们,感受可能会更加的明显。 以下是我之前跟图片打交道踩到的坑,跟大家分享一下经验。 一、情景再现 用postman请求接口...

    helloworldcoding 评论0 收藏0
  • 你知道前端对图片处理方式吗?

    摘要:对于第二种存储方式,我们前端需要将其二进制流交由对象处理,然后通过的生成临时赋值给属性来显示。当后端返回特定的图片二进制流的时候,就像我第一里的情景再现说的,前端用容器接收。 前言 作为前端工程师 de 我们,日常少不了会跟图片打交道。在各大电商平台工作的前端工程师们,感受可能会更加的明显。 以下是我之前跟图片打交道踩到的坑,跟大家分享一下经验。 一、情景再现 用postman请求接口...

    LiuRhoRamen 评论0 收藏0

发表评论

0条评论

smartlion

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<