Bootstrap
关注
分享
扫一扫
xiabe
这个作者很懒，什么都没留下…
展开
-
Bootstrap（开始）
引言启动Bootstrap，这是世界上最流行的构建响应性、移动优先的站点的框架，使用BootstrapCDN和一个模板启动页面。快速开始希望快速添加引导到您的项目?使用BootstrapCDN，由StackPath的人员免费提供。使用包管理器还是需要下载源文件?...原创 2019-04-08 15:00:59 · 307 阅读 · 0 评论 -
Bootstrap 空间划分
如何工作在Bootstrap 中我们通过指定一些类属性，来使得我们的padding和margin 属性得到改变，从默认的0.25 rem到3rem。注意适用于所有断点(从xs到xl)的间距实用程序中没有断点缩写。这是因为这些类是从min-width: 0及以上应用的，因此不受媒体查询的约束。然而，其余的断点确实包含一个断点缩写。类使用的格式：xs： {property}{sides}-{...原创 2019-05-07 14:45:27 · 1364 阅读 · 0 评论 -
Bootstrap 网格系统
简介使用我们强大的mobile-first flexbox网格构建各种形状和大小的布局，这要归功于12列系统、5个默认响应层、Sass变量和mixin以及几十个预定义类。通过下面之类的方式来实现。<div class="container"> <div class="row"> <div class="col-sm"> One of...原创 2019-05-07 13:59:45 · 107 阅读 · 0 评论 -
Bootstrap 概述
Containers（容器）容器是最基本的布局元素在Bootstrap中，特别对于网格布局。流动容器，意味它的容器宽度是会改变的。100%wide宽度。<div class="container-fluid"> ...</div>响应断点由于Bootstrap首先被开发为可移动的，所以我们使用一些媒体查询来为布局和界面创建合理的断点。这些断点大多基于最小视...原创 2019-05-07 13:49:45 · 435 阅读 · 0 评论 -
Bootstrap4 入门学习
快速开始配置环境一个简单的hello world例子<!doctype html> <!-- h5声明 --><html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <!-- 响应式标签 -...原创 2019-05-07 13:43:02 · 502 阅读 · 1 评论 -
Bootstrap 组件 表单（forms）[待续]
表单用于创建各种表单的表单控件样式、布局选项和自定义组件的示例和使用指南。概述Bootstrap的表单控件扩展了我们使用类重新引导的表单样式。使用这些类来选择它们的自定义显示，以便在浏览器和设备之间实现更一致的呈现。确保在所有输入上使用适当的类型属性(例如，电子邮件用于电子邮件地址或数字信息的数字)，以利用较新的输入控件，如电子邮件验证、数字选择等。下面是一个演示Bootstrap表单样...原创 2019-05-08 15:38:57 · 479 阅读 · 0 评论 -
Bootstrap -Card卡片
Cards（卡片）Bootstrap 提供了一个可伸缩可扩展的内容容器给多种变量和选择。关于卡片是一个灵活的、可扩展的内容容器。它包括用于页眉和页脚的选项、各种各样的内容、上下文背景颜色和强大的显示选项。如果您熟悉Bootstrap 3，卡将替换我们的旧面板、井和缩略图。与这些组件类似的功能可以作为卡片的修饰符类使用。例子卡片是用尽可能少的标记和样式构建的，但仍然能够交付大量的控制和定制...原创 2019-05-08 13:57:29 · 15476 阅读 · 1 评论 -
Bootstrap 组件 Button 按钮
按钮使用Bootstrap 的自定义按钮样式对于一些行动在 表单中，对话框，和更多支持的多种大小、状态还有更多。例子Bootstrap包含几个预定义的按钮样式，每个样式都有自己的语义目的，还添加了一些额外的功能来实现更多的控制。<button type="button" class="btn btn-primary">Primary</button><bu...原创 2019-05-08 12:53:34 · 3252 阅读 · 0 评论 -
Bootstrap 组件 Breadcrumb（面包屑）
Breadcrumb(面包屑)面包屑是用来干嘛的呢？指示导航层次结构中当前页面的位置，导航层次结构通过CSS自动添加分隔符。就是指示现在页面在导航栏中的层级目录的位置。演示代码<nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item activ...原创 2019-05-08 12:29:10 · 3006 阅读 · 3 评论 -
Bootstrap Badges（徽章）
简介徽章的大小跟父元素的大小直接相关，通过使用相关的字体大小和em单位。例子语法<h1>Example heading <span class="badge badge-secondary">New</span></h1>用于按钮徽章除了用于label的装饰还可以用于按钮的装饰，给按钮提供一个计数器。语法<button ...原创 2019-05-08 11:15:21 · 1018 阅读 · 0 评论 -
Bootstrap组件——alert（警告栏）
警告框(alert)简介使用少量可用且灵活的警报消息为典型的用户操作提供上下文反馈消息。**常见的：**长这个样子，是不是很熟悉。其实不是的，它就是一个警告栏目。Bootstrap 的alert它提供了一大堆通过背景和字体颜色预定义的不同功能用途的警告框。语法：里面空荡荡的啥都没有。<div class="alert alert-primary" role="alert"...原创 2019-05-07 15:51:43 · 13040 阅读 · 0 评论