Bootstrap
关注
分享
扫一扫
訾博ZiBo
慢慢学，不要停。
展开
-
【Bootstrap】017-组件：面板、嵌入内容、Well
目录一、面板1、基本实例代码演示：运行结果：2、带标题的面版代码演示：运行结果：3、带脚注的面版代码演示：运行结果：4、情境效果代码演示：运行结果：5、带表格的面版代码演示：运行结果：6、带列表组的面版代码演示：运行结果：二、具有响应式特性的嵌入内容代码演示：运行结果：三、Well1、默认效果代码演示：运行结果：2、可选类/样式代码演示：运行结果：一、面板虽然不总是必须，但是某些时候你原创 2020-10-07 15:58:49 · 254 阅读 · 0 评论 -
【Bootstrap】016-组件：媒体对象、列表组
一、媒体对象原创 2020-10-07 15:39:22 · 632 阅读 · 0 评论 -
【Bootstrap】015-组件：缩略图、警告框、进度条
目录一、缩略图1、概述2、默认样式的实例代码演示：运行结果：3、自定义内容代码演示：运行结果：二、警告框1、实例代码演示：运行结果：2、可关闭的警告框代码演示：运行结果：备注：3、警告框中的链接代码演示：运行结果：三、进度条1、概述2、基本实例代码演示：运行结果：3、带有提示标签的进度条代码演示：运行结果：代码演示：运行结果：4、根据情境变化效果代码演示：运行结果：5、条纹效果原创 2020-10-07 11:58:36 · 556 阅读 · 0 评论 -
【Bootstrap】014-组件：分页、标签、徽章、巨幕、页头
目录一、分页1、概述2、默认分页代码演示：运行结果：备注：3、禁用和激活状态代码演示：运行结果：4、尺寸代码演示：运行结果：5、翻页默认实例：对齐链接：可选的禁用状态：代码演示：运行结果：二、标签1、实例代码演示：运行结果：2、可用的变体代码演示：运行结果：备注：三、徽章1、实例代码演示：运行结果：2、自我崩溃3、适配导航元素的激活状态代码演示：运行结果：四、巨幕原创 2020-10-07 11:32:21 · 280 阅读 · 0 评论 -
【Bootstrap】013-组件：导航、导航条、路径导航
目录一、导航1、概述2、标签页代码演示：运行结果：3、胶囊式标签页代码演示：运行结果：4、两端对齐的标签页代码演示：运行结果：5、禁用的链接代码演示：运行结果：6、添加下拉菜单带下拉菜单的标签页：二、导航条1、默认样式的导航条代码演示：运行结果：2、品牌图标代码演示：运行结果：3、表单代码演示：运行结果：备注：4、按钮代码演示：运行结果：备注：5、文本代码演示：运行结果：原创 2020-10-07 10:42:55 · 881 阅读 · 0 评论 -
【Bootstrap】012-组件：按钮组、按钮式下拉菜单、输入框组
一、菜单组1、概述通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为；2、基本实例用.btn 在.btn-group 中包装一系列按钮；代码演示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">.原创 2020-10-07 09:47:55 · 759 阅读 · 0 评论 -
【Bootstrap】011-组件：Glyphicons 字体图标、下拉菜单
一、Glyphicons 字体图标1、所有可用的图标见https://v3.bootcss.com/components/#glyphicons2、如何使用出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格；注意：代码演示：<!DOCTYPE html><html> <head> <m.原创 2020-10-05 16:01:11 · 754 阅读 · 0 评论 -
【Bootstrap】010-全局样式：响应式工具
一、说明为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类；有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类可以在不同设备上提供不同的展现形式；二、可用的类通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容；三、打印类和常规的响应式类一样，使用下面的类可以针对打印机隐藏或显示某些内容；...原创 2020-10-05 10:40:08 · 248 阅读 · 0 评论 -
【Bootstrap】009-全局样式：辅助类
一、情境文本颜色1、说明通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样；2、演示代码演示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta .原创 2020-10-05 10:00:53 · 283 阅读 · 0 评论 -
【Bootstrap】008-全局样式：图片
一、响应式图片1、说明在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放；如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。 请参考助手类章节 了解更多关于 .center-block原创 2020-10-05 09:20:30 · 341 阅读 · 0 评论 -
【Bootstrap】007-全局样式：按钮
一、可作为按钮使用的标签或元素1、说明为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式；2、演示代码演示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content.原创 2020-10-04 17:03:20 · 401 阅读 · 0 评论 -
【Bootstrap】006-全局样式：表单
一、基本实例1、说明单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列；2、演示代码演示：<!DOCTYPE html><html> <head> <met.原创 2020-10-04 16:43:15 · 423 阅读 · 0 评论 -
【Bootstrap】005-全局样式：表格
一、基本实例1、说明为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来；2、演示代码演示：<!DOCTYPE html><html> <head> <meta charset="utf-8"&g.原创 2020-10-04 11:38:31 · 264 阅读 · 0 评论 -
【Bootstrap】004-全局样式：代码
一、内联代码1、说明通过 <code> 标签包裹内联样式的代码片段；2、演示代码演示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wi.原创 2020-10-04 11:05:06 · 148 阅读 · 0 评论 -
【Bootstrap】003-全局样式：排版
一、标题说明：HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式；在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题；代码示例：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <me.原创 2020-10-04 10:34:15 · 217 阅读 · 0 评论 -
【Bootstrap】002-全局CSS样式-概览和栅格系统
一、概览1、HTML5 文档类型Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型；参照下面的格式进行设置：<!DOCTYPE html><html lang="zh-CN"> ...</html>2、移动设备优先Bootstrap 3针对移动设备的样式融合进了框架的每个角落，Bootstrap 是移动设备优先的。为了确保适当的绘制和触屏缩放，需要在 <head> .原创 2020-10-04 09:31:37 · 563 阅读 · 0 评论 -
【Bootstrap】001-Bootstrap入门
一、介绍1、简介（百科）Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷；2、官网网址：https://www.bootcss.com/截图：3、下载网址：https://v3.bootcss.com/getting-started/#download下载：引入云端文...原创 2020-09-30 10:59:25 · 357 阅读 · 0 评论