Bootstrap一款超好用的前端框架


Posted in Javascript onSeptember 25, 2017

前  言              

       Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap在JQuery的基础上进行了更为个性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。让前端开发更快速、简单。

基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。

CSS:Bootstrap 自带以下特性:全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。

组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。

JavaScript 插件:Bootstrap包含了十几个自定义的jQuery 插件。可以直接包含所有的插件,也可以逐个包含这些插件。

定制:可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到自己的版本。

1、Bootstrap 基本模板

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
 <meta charset="utf-8">
 <!--让浏览器使用最新的IE内核进行渲染页面-->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!--设置视口宽度等于当前设备宽度,默认缩放比为1-->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
 <title>Bootstrap 101 Template</title>
 <!-- 导入Bootstrap核心CSS文件 -->
 <link href="css/bootstrap.css" rel="external nofollow" rel="stylesheet">
 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--
 ①<!--[if lt IE 9]>…… <![endif]- ->这一对标签用于检测当前浏览器的版本,lt表示小于,gt表示大写。所以这句话作用是,当浏览器版本低于IE9执行。
 ②html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题。
 ③respond.min:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。 
 -->
 <!--[if lt IE 9]>
 <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
 <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 <![endif]-->
 </head>
 <body>
 <h1>你好!</h1>
 <script src="js/jquery-3.1.1.js"></script>
 <!-- 导入BootStrap的JS插件
 ①如果不使用BootStrap提供的JS插件,则这个JS文件无需导入;
 ②BootStrap的JS插件功能依赖JQuery,因此这个JS必须在JQuery之后导入;
 -->
 <script src="js/bootstrap.min.js"></script>
 </body>
</html>

拷贝并粘贴上面的 HTML 代码,这就是一个最简单的 Bootstrap 页面了。一定要注意,Bootstrap 的所有 JavaScript 插件都依赖 jQuery,因此 jQuery 必须在 Bootstrap 之前引入。

2、组件

Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件:

下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。

2.1字体图标

bootstrap默认提供了二百多个图标。我们可以通过span标签来使用这些图标:

<h3>图标</h3> 
 <span class="glyphicon glyphicon-home"></span>
 <span class="glyphicon glyphicon-signal"></span>
 <span class="glyphicon glyphicon-cog"></span>
 <span class="glyphicon glyphicon-apple"></span>

让我们来看一下效果:

Bootstrap一款超好用的前端框架

2.2按钮

<button></button>标签用于创建按钮,bootstrap提供了丰富的按钮样式。按钮除了有默认的大小外,bootstrap还提供三个参数来调整按钮的大小,分别是:btn-lg、btn-sm和btn-xs。

<h3>按钮</h3>
 <button type="button" class="btn btn-default">按钮</button>
 <button type="button" class="btn btn-primary">primary</button>
 <button type="button" class="btn btn-success">success</button>
 <button type="button" class="btn btn-info">info</button>
 <button type="button" class="btn btn-warning">warning</button>
 <button type="button" class="btn btn-danger">danger</button>
 <h3>按钮尺寸</h3>
 <button type="button" class="btn btn-default">按钮</button>
 <button type="button" class="btn btn-primary btn-lg">primary</button>
 <button type="button" class="btn btn-success btn-sm">success</button>
 <button type="button" class="btn btn-info btn-xs">info</button>
 <h3>把图标显示在按钮里</h3>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-home"></span>  按钮</button>

效果:

Bootstrap一款超好用的前端框架

2.3下拉菜单

下拉菜单是最常见的交互之一,bootstrap为我们提供了漂亮的样式。    

<h3>下拉菜单</h3>
 <div class="dropdown">
 <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
 Dropdown
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>
 </ul>
 </div>

看一下效果:

Bootstrap一款超好用的前端框架

2.4输入框

通过<input></input>标签去创建输入框。

<h3>输入框</h3>
 <div class="input-group">
 <span class="glyphicon glyphicon-user"></span>
 <input type="text" placeholder="username">
 </div>
 <div class="input-group">
 <span class="glyphicon glyphicon-lock"></span>
 <input type="password" placeholder="password">
 </div>

效果图:

Bootstrap一款超好用的前端框架

2.5导航栏

 导航栏作为整个网站的指引必不可少。

<h3>导航栏</h3>
 <nav class="navbar navbar-inverse navbar-fixed-top">
 <div id="navbar" class="navbar-collapse collapse">
 <ul class="nav navbar-nav">
 <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
 <li><a href="#about" rel="external nofollow" >About</a></li>
 <li><a href="#contact" rel="external nofollow" >Contact</a></li>
 <li class="dropdown">
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
 <ul class="dropdown-menu" role="menu">
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li>
 <li class="divider"></li>
 <li class="dropdown-header">Nav header</li>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>
 </ul>
 </li>
 </ul>
 </div><!--/.nav-collapse -->
 </div>
 </nav>

效果呢↓

Bootstrap一款超好用的前端框架

2.6表单

人与系统之间数据的传递都需要依靠表单来完成。比如注册/登录信息的提交,查询条件的提交等。用<form></form>标签来创建表单。

<h3>表单</h3>
 <form>
 <div class="form-group">
 <span class="glyphicon glyphicon-user"></span>
 <input type="email" id="exampleInputEmail1" placeholder="Enter email">
 </div>
 <div class="form-group">
 <span class="glyphicon glyphicon-lock"></span>
 <input type="password" id="exampleInputPassword1" placeholder="Password">
 </div>
 <div class="form-group">
 <label for="exampleInputFile">File input</label>
 <input type="file" id="exampleInputFile">
 <p class="help-block">Example block-level help text here.</p>
 </div>
 <div class="checkbox">
 <label>
 <input type="checkbox"> Check me out
 </label>
 </div>
 <button type="submit" class="btn btn-default">Submit</button>
 </form>

效果如下:

Bootstrap一款超好用的前端框架

2.7警告框

警告框是系统向用户传达信息和提供指引的重要手段。没有针对警告框的标签,通过bootstrap所提供的样式可以瞬间制作出漂亮的警告框。

<h3>警告框</h3>
 <div class="alert alert-warning alert-dismissible" role="alert">
 <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
 <strong>Warning!</strong> Better check yourself, you're not looking too good.
 </div>
 <div class="alert alert-success" role="alert">
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">success!</a>
 </div>
 <div class="alert alert-info" role="alert">
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">info!</a>
 </div>
 <div class="alert alert-warning" role="alert">
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">warning!</a>
 </div>
 <div class="alert alert-danger" role="alert">
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">danger!</a>
 </div>

效果图:

Bootstrap一款超好用的前端框架

2.8进度条

 系统的处理过程往往需要用户等待,进度条可以让用户感知到系统的处理过程,从而增加容忍度。

<h3>进度条</h3>
 <div class="progress">
 <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
 70%
 </div>
 </div>

3、Bootstrap栅格系统

首先,我们先要了解什么是栅格系统!往下看 ↓

Bootstrap一款超好用的前端框架

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin用于生成更具语义的布局。

栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,我们的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理:

“行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
通过“行(row)”在水平方向创建一组“列(column)”。

你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。

类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。

如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。

栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-lg-*不存在, 也影响大屏幕设备。

3.1媒体查询

在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值。

/* 超小屏幕(手机,小于 768px) */
/* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的( Bootstrap 是移动设备优先) */
/* 小屏幕(平板,大于等于 768px) */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }

3.2栅格参数

Bootstrap一款超好用的前端框架

<div class="row">
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
 <div class="col-md-8">.col-md-8</div>
 <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
 <div class="col-md-6">.col-md-6</div>
 <div class="col-md-6">.col-md-6</div>
</div>

Bootstrap一款超好用的前端框架

输入上面的代码就可以实现上图的样式,是不是已经对栅格系统有所了解了,我们继续往下看↓

3.3响应式列重置

即便有给出的栅格class,你也不免会碰到一些问题,例如,在某些阈值时,某些列可能会出现比别的列高的情况。为了克服这一问题,建议联合使用 .clearfix 和响应式工具类。

<div class="row">
 <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 <div class="clearfix visible-xs-block"></div>
 <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

除了列在分界点清除响应, 您可能需要 重置偏移, 后推或前拉某个列。

<div class="row">
 <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
 <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
 <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
 <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>
<h2 style="margin: 8px 0px 0px; padding: 0px; font-weight: bold; font-size: 16px; line-height: 28px; max-width: 100%; color: #59c3f9; min-height: 32px; border-bottom-width: 1.5px; border-bottom-style: solid; border-color: #59c3f9; text-align: justify;"><span style="font-family: 'Microsoft YaHei'; font-size: 14px;"><span class="autonum" style="background-color: #59c3f9; color: #ffffff; display: block; float: left; line-height: 20px; margin: 0px 8px 0px 0px; max-width: 100%; padding: 4px 10px; word-wrap: break-word !important;" title="" data-original-title="">3.2.1</span><span style="font-size: 16px;"><strong class="135brush" style="border-color: #59c3f9; color: inherit;" data-brushtype="text">内部类作为事件监听器</strong></span></span></h2>

Bootstrap一款超好用的前端框架

3.4列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。

<div class="row">
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
 <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
 <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
 <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Bootstrap一款超好用的前端框架

3.5嵌套列

为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行(row)所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列)。

<div class="row">
 <div class="col-sm-9">
 Level 1: .col-sm-9
 <div class="row">
 <div class="col-xs-8 col-sm-6">
 Level 2: .col-xs-8 .col-sm-6
 </div>
 <div class="col-xs-4 col-sm-6">
 Level 2: .col-xs-4 .col-sm-6
 </div>
 </div>
 </div>
</div>

Bootstrap一款超好用的前端框架

3.6列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。

<div class="row">
 <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
 <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Bootstrap一款超好用的前端框架

总结

以上所述是小编给大家介绍的Bootstrap一款超好用的前端框架,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
对table和ul实现js分页示例分享
Feb 24 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
Mar 19 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
发布Angular应用至生产环境的方法
Dec 10 Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
javascript实现简易聊天室
Jul 12 Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 #Javascript
javascript input输入框模糊提示功能的实现
Sep 25 #Javascript
vue-cli中的webpack配置详解
Sep 25 #Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 #Javascript
react native与webview通信的示例代码
Sep 25 #Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 #Javascript
vuex中使用对象展开运算符的示例
Sep 25 #Javascript
You might like
PHP初学入门
2006/11/19 PHP
基于php常用正则表达式的整理汇总
2013/06/08 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
JS作用域深度解析
2016/12/29 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
itchat接口使用示例
2017/10/23 Python
python正则表达式re之compile函数解析
2017/10/25 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
Django的models中on_delete参数详解
2019/07/16 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
Django nginx配置实现过程详解
2020/09/10 Python
html5与css3小应用
2013/04/03 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
资深地理教师自我评价
2013/09/21 职场文书
群众路线领导对照材料
2014/08/23 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
护士医德医风心得体会
2016/01/25 职场文书
教你部署vue项目到docker
2022/04/05 Vue.js