springsnow - 博客园

Python（00）：Web 框架：Django、Flask 与 Tornado

摘要： web框架是什么? web开发框架是一组工具，同时也提供了非常多的资源，供软件开发人员构建和管理网站、提供web服务、编写web应用程序。它是一个抽象工具，能使开发应用程序和重复使用代码的过程变得更容易。为什么需要web开发框架? 进行自定义软件开发时，web开发框架让整个过程变得更容易，因而开发阅读全文

posted @ 2020-01-07 19:57 springsnow 阅读(375) 评论(0) 推荐(0) 编辑

HTML5（13） IndexedDB 索引数据库

摘要：一、诞生背景：随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10 阅读全文

posted @ 2020-01-06 10:46 springsnow 阅读(435) 评论(0) 推荐(0) 编辑

bootstrap4（33）：实用工具常用样式清单（可查找）

摘要： 1、容器和网格系统容器 container ：固定宽度，不同尺寸固定了不同的宽度 container-fluid： 100%宽度栅格系统 col-： =576px col-md- ： >=768px col-lg- ： >=992px col-xl- ： >=1200px 2、字体颜色及背景颜色字体 tex... 阅读全文

posted @ 2020-01-03 19:53 springsnow 阅读(519) 评论(0) 推荐(0) 编辑

JavaScript（26）：URI编码解码escape()、encodeURI()和decodeURI()

摘要：一、URI编码解码 1、编解码一个字符串（淘汰） ECMAScript v3 反对使用该方法，应使用 decodeURI() 和 decodeURIComponent() 替代它。 1、escape()：编码一个字符串 escape()除了 ASCII 字母、数字和特定的符号外，对传进来的字符串全部进行转义编码。语法：escape(value); var str = "jav... 阅读全文

posted @ 2020-01-03 15:27 springsnow 阅读(628) 评论(0) 推荐(0) 编辑

Bootstrap4（32）：综合网页实例

摘要：接下来我们通过 Bootstrap4 来创建一个简单的响应式网页。在学习之前我们可以先看下效果：https://www.runoob.com/try/demo_source/bootstrap3-makewebsite.htm代码：我的第一个 Bootstrap 4 页面重置浏览器窗口大小查看效果！导航 ... 阅读全文

posted @ 2020-01-03 09:37 springsnow 阅读(2314) 评论(0) 推荐(0) 编辑

Bootstrap4（31）：实用工具

摘要： Bootstrap4 提供了一些小工具，可以让我们不用写 CSS 代码就能实现想要的效果。一、边框使用 border 类可以添加或移除边框: 尝试一下 »二、边框颜色Bootstrap4 提供了一些类来设置边框颜色: 尝试一下 »三、边框圆角设置使用rounded 类可以添加圆角边框: 尝试一下 »四、浮动.float-right 类用于设置元素右浮动， .flo... 阅读全文

posted @ 2020-01-02 21:28 springsnow 阅读(334) 评论(0) 推荐(0) 编辑

Bootstrap4（30）：Flex（弹性）布局

摘要： Bootstrap 4 通过 flex 类来控制页面的布局。一、弹性盒子(flexbox) ：.d-*-flex；.d-*-inline-flexBootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局。弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计，如果你还不了解 flex，可以阅读我们的 CSS3 弹性... 阅读全文

posted @ 2020-01-02 20:12 springsnow 阅读(1908) 评论(0) 推荐(0) 编辑

Bootstrap4（29）：多媒体对象

摘要： Bootstrap 提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。应用场景有博客评论、微博等:一、基础多媒体对象要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果: 菜鸟教程学的不仅是技术，更是梦想！！！ ... 阅读全文

posted @ 2020-01-02 17:20 springsnow 阅读(346) 评论(0) 推荐(0) 编辑

Bootstrap4（28）：滚动监听(Scrollspy)

摘要：滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。一、如何创建滚动监听以下实例演示了如何创建滚动监听：向您想要监听的元素（通常是 body）添加 data-spy="scroll" 。然后添加 data-target 属性，它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。注意可滚动... 阅读全文

posted @ 2020-01-02 17:17 springsnow 阅读(633) 评论(0) 推荐(0) 编辑

Bootstrap4（27）：弹出框

摘要：弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。一、如何创建弹出框通过向元素添加 data-toggle="popover" 来来创建弹出框。title 属性的内容为弹出框的标题，data-content 属性显示了弹出框的文本内容：多次点我注意: 弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 popover() 方法。以下实例可以... 阅读全文

posted @ 2020-01-02 17:04 springsnow 阅读(1044) 评论(0) 推荐(0) 编辑

Bootstrap4（26）：提示框

摘要：提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。一、如何创建提示框通过向元素添加 data-toggle="tooltip" 来来创建提示框。title 属性的内容为提示框显示的内容：鼠标移动到我这注意: 提示框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。以下实例可以在文档的任何地方使用提示框：$(document).ready... 阅读全文

posted @ 2020-01-02 16:57 springsnow 阅读(400) 评论(0) 推荐(0) 编辑

Bootstrap4（25）：模态框

摘要：模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。一、如何创建模态框以下实例创建了一个简单的模态框效果：按钮：用于打开模态框打开模态框模态框模态框头部模态框头部 ×... 阅读全文

posted @ 2020-01-02 16:49 springsnow 阅读(415) 评论(0) 推荐(0) 编辑

Bootstrap4（24）：轮播

摘要：轮播是一个循环的幻灯片：一、如何创建轮播以下实例创建了一个简单的图片轮播效果：指示符轮播图片左右切换按钮尝试一下 »二、轮播图片上添加描述 ... 阅读全文

posted @ 2020-01-02 16:33 springsnow 阅读(584) 评论(0) 推荐(0) 编辑

Bootstrap4（23）：自定义表单

摘要： Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。一、自定义复选框如果要自定义一个复选框，可以设置为父元素，类为 .custom-control 和 .custom-checkbox，复选框作为子元素放在该里头，然后复选框设置为 type="checkbox"，类为 .custom-control-input。复选框的文本使用 label 标签，标签使用 .custo... 阅读全文

posted @ 2020-01-02 16:26 springsnow 阅读(694) 评论(0) 推荐(0) 编辑

Bootstrap4（22）：输入框组

摘要：一、输入框前后添加信息我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。使用 .input-group-prepend 类可以在输入框的的前面添加文本信息， .input-group-append 类添加在输入框的后面。最后，我们还需要使用 .input-group-text 类来设置文本的样式。 @ ... 阅读全文

posted @ 2020-01-02 16:16 springsnow 阅读(422) 评论(0) 推荐(0) 编辑

Bootstrap4（21）：表单控件

摘要： Bootstrap4 支持以下表单控件：input textarea checkbox radio select一、Bootstrap InputBootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel... 阅读全文

posted @ 2020-01-02 16:03 springsnow 阅读(686) 评论(0) 推荐(0) 编辑

Bootstrap4（20）：表单

摘要：创建表单在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。表单元素 input, textarea, 和 select ，elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。Bootstrap4 表单布局堆叠表单 (全屏宽度)：垂直方向内联表单：水平方向Boo... 阅读全文

posted @ 2020-01-02 14:32 springsnow 阅读(424) 评论(0) 推荐(0) 编辑

Bootstrap4（19）：面包屑导航（Breadcrumb）

摘要：面包屑导航是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置，是在用户界面中的一种导航辅助。Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中的 ::before 和 content 来添加，下面所示的 class... 阅读全文

posted @ 2020-01-02 14:28 springsnow 阅读(906) 评论(0) 推荐(0) 编辑

Bootstrap4（18）：导航栏

摘要：一、导航栏导航栏一般放在页面的顶部。我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。导航栏上的选项可以使用元素并添加 class="navbar-nav" 类。然后在元素上添加 .nav-item 类，元素上使用 .nav-link 类: 小屏幕上水... 阅读全文

posted @ 2020-01-02 14:23 springsnow 阅读(3341) 评论(0) 推荐(0) 编辑

JavaScript（25）：Ajax

摘要：一、什么是 AJAX ？AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新阅读全文

posted @ 2020-01-02 11:30 springsnow 阅读(265) 评论(0) 推荐(0) 编辑

Bootstrap4（17）：导航

摘要：一、创建导航栏如果你想创建一个简单的水平导航栏，可以在元素上添加 .nav类，在每个选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类: Link Link Link Disabled 导航居中导航右对齐尝试一下 »三、垂直导航.flex-column 类用于创建... 阅读全文

posted @ 2020-01-02 11:19 springsnow 阅读(557) 评论(0) 推荐(0) 编辑

Bootstrap4（16）：折叠板

摘要： Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。折叠 Lorem ipsum dolor text.... 尝试一下 » 实例解析 .collapse 类用于指定一个折叠元素 (实例中的 ); 点击按钮后会在隐藏与显示之间切换。控制内容的隐藏与显示，需要在或元素上添加 data-toggle="collapse" 属性。 ... 阅读全文

posted @ 2020-01-02 10:47 springsnow 阅读(528) 评论(0) 推荐(0) 编辑

Bootstrap4（15）：下拉菜单

摘要：一、创建下拉菜单Bootstrap4 下拉菜单依赖于 popper.min.js。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。.dropdown 类用来指定一个下拉菜单。我们可以使用一个按钮或链接来打开下拉菜单，按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。元素上添加 .dropdown-menu 类来设置实际下拉菜单... 阅读全文

posted @ 2020-01-02 10:36 springsnow 阅读(735) 评论(0) 推荐(0) 编辑

Bootstrap4（14）：卡片

摘要：一、简单的卡片我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片，实例如下: 简单的卡片尝试一下 »Bootstrap4 的卡片类似 Bootstrap 3 中的面板、图片缩略图、well。二、头部和底部.card-header类用于创建卡片的头部样式， .card-footer 类用于创建卡片的底部样式：头部内容底部 ... 阅读全文

posted @ 2020-01-01 15:55 springsnow 阅读(1434) 评论(0) 推荐(0) 编辑

Linux 简介

摘要： Linux 内核最初只是由芬兰人林纳斯·托瓦兹（Linus Torvalds）在赫尔辛基大学上学时出于个人爱好而编写的。Linux 是一套免费使用和自由传播的类 Unix 操作系统，是一个基于 POSIX 和 UNIX 的多用户、多任务、支持多线程和多 CPU 的操作系统。Linux 能运行主要的 UNIX 工具软件、应用程序和网络协议。它支持 32 位和 64 位硬件。Linux 继承了 Un... 阅读全文

posted @ 2020-01-01 15:53 springsnow 阅读(375) 评论(0) 推荐(0) 编辑

JavaScript（24）：处理XML DOM、XPath和XSLT

摘要：一、浏览器对XML DOM的支持1、将XML解析为DOM文档跨浏览器把XML解析为DOM文档:这个 parseXml()函数只接收一个参数，即可解析的 XML 字符串。function parseXml(xml) { var xmldom = null; if (typeof DOMParser != "undefined") { xmldom = (new DOMPa... 阅读全文

posted @ 2020-01-01 13:42 springsnow 阅读(398) 评论(0) 推荐(0) 编辑

JavaScript（24）：XPath、XSLT与XQuery介绍

摘要：一、XPath查询 XSL指扩展样式表语言（EXtensible Stylesheet Language）。官方网站：https://www.w3.org/TR/xpath/ XSL - 不仅仅是样式表语言,包括三部分： XSLT :一种用于转换 XML 文档的语言。 XPath :一种用于在 X 阅读全文

posted @ 2020-01-01 13:27 springsnow 阅读(1158) 评论(0) 推荐(0) 编辑

Bootstrap4（13）：列表组

摘要：一、创建列表组大部分基础列表组都是无序的。要创建列表组，可以在元素上添加 .list-group 类, 在元素上添加 .list-group-item 类: First item Second item Third item 尝试一下 »二、激活状态的列表项通过添加 .active 类来设置激活状态的列表项： Active item Second item Thi... 阅读全文

posted @ 2019-12-31 20:00 springsnow 阅读(773) 评论(0) 推荐(0) 编辑

Bootstrap4（12）：分页

摘要：一、分页效果网页开发过程，如果碰到内容过多，一般都会做分页处理。Bootstrap 4 可以很简单的实现分页效果。要创建一个基本的分页可以在元素上添加 .pagination 类。然后在元素上添加 .page-item 类：: Previous 1 2 3 Next 尝试一下 »二、当前页页码状态当前页可以使用 .active 类来高亮显示： Previous ... 阅读全文

posted @ 2019-12-31 19:48 springsnow 阅读(1454) 评论(0) 推荐(0) 编辑

Bootstrap4（11）：进度条

摘要：一、进度条可以显示用户任务的完成过程。创建一个基本的进度条的步骤如下：添加一个带有 .progress 类的。接着，在上面的内，添加一个带有 class .progress-bar 的空的。添加一个带有百分比表示的宽度的 style 属性，例如 style="width:70%" 表示进度条在 70% 的位置。尝试一下 »二、进度条高度进度条高度默认为 16px。我们可以使用... 阅读全文

posted @ 2019-12-31 19:39 springsnow 阅读(427) 评论(0) 推荐(0) 编辑

Bootstrap4（10）：徽章（Badges）

摘要：一、徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到元素上即可。徽章可以根据父元素的大小的变化而变化:测试标题 New 测试标题 New 测试标题 New 测试标题 New 测试标题 New 测试标题 New尝试一下 »二、各种颜色类型的徽章以下列出了所有颜色类型的徽章:主... 阅读全文

posted @ 2019-12-31 19:29 springsnow 阅读(466) 评论(0) 推荐(0) 编辑

Bootstrap4（9）：按钮组

摘要：一、创建按钮组Bootstrap 4 中允许我们将按钮放在同一行上。可以在元素上添加 .btn-group 类来创建按钮组。 Apple Samsung Sony 尝试一下 »提示: 我们可以使用 .btn-group-lg|sm 类来设置按钮组的大小。 Apple Samsung Sony 尝试一下 »二、垂直按钮组可以使用 .btn-group-vertical ... 阅读全文

posted @ 2019-12-31 19:09 springsnow 阅读(543) 评论(0) 推荐(0) 编辑

Bootstrap4（8）：按钮

摘要：一、不同样式的按钮基本按钮主要按钮次要按钮成功信息警告危险黑色浅色链接尝试一下 »按钮类可用于 a, button, 或 input 元素上:链接按钮按钮尝试一下 »二、按钮设置边框主要按钮次要按钮成功信息警告危险黑色浅色尝试一下 »三、不同大小的按钮大号按钮默认按钮小号按钮尝试一下 »四、块级按钮通过添加 .btn-block 类可以设置块级按钮：按钮... 阅读全文

posted @ 2019-12-31 18:58 springsnow 阅读(432) 评论(0) 推荐(0) 编辑

Bootstrap4（7）：表格设置信息提示框

摘要：一、提示框提示框可以使用 .alert 类（无背景）, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light ,.alert-dark或 .alert-light 类来实现: 成功! 指定操作成功提示信息。 ... 阅读全文

posted @ 2019-12-31 18:44 springsnow 阅读(995) 评论(0) 推荐(0) 编辑

Bootstrap4（6）：图像设置、超大屏幕Jumbotron

摘要：一、圆角图片.rounded 类可以让图片显示圆角效果：尝试一下 »二、椭圆图片.rounded-circle 类可以设置椭圆形图片:尝试一下 »三、缩略图.img-thumbnail 类用于设置图片缩略图(图片有边框):尝试一下 »四、图片对齐方式使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐:尝试一下 »五、响应式图片图像有各种各样的尺寸，... 阅读全文

posted @ 2019-12-31 18:30 springsnow 阅读(1441) 评论(0) 推荐(0) 编辑

Bootstrap4（5）：表格设置

摘要：一、Bootstrap4 基础表格：.tableBootstrap4 通过 .table 类来设置基础表格的样式，实例如下: Firstname Lastname Email John Doe john@example.com ... 阅读全文

posted @ 2019-12-31 18:22 springsnow 阅读(972) 评论(0) 推荐(0) 编辑

Bootstrap4（4）：颜色设置

摘要：一、文本颜色类：text-***Bootstrap 4 提供了一些有代表意义的颜色类：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light: 代表指定意义的文本颜色 ... 阅读全文

posted @ 2019-12-31 17:16 springsnow 阅读(6073) 评论(4) 推荐(0) 编辑

Bootstrap4（3）：文字排版

摘要：一、Bootstrap 4 默认设置Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif。此外，所有的元素 margin-top: 0 、 margin-bottom: 1rem (16px)。二、排版元素1、h1... 阅读全文

posted @ 2019-12-31 16:34 springsnow 阅读(859) 评论(0) 推荐(0) 编辑

Bootstrap4（2）：网格系统

摘要： Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。我们也可以根据自己的需要，定义列数：Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。一、网格类：col-*-*">Bootstrap 4 网格系统有以下 5 个类:.col- 针对所有设备 .col-sm- 平板 - 屏幕宽度等... 阅读全文

posted @ 2019-12-31 15:07 springsnow 阅读(459) 评论(0) 推荐(0) 编辑

Bootstrap4（1）：安装使用

摘要：一、概述Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app ... 阅读全文

posted @ 2019-12-31 14:41 springsnow 阅读(737) 评论(0) 推荐(0) 编辑