button样式

跟随我在oracle学习php(12)

匿名 (未验证) 提交于 2019-12-02 22:11:45
DOM 文档对象模型 body:(什么时候)找到标签 操作标签 找到标签:(都会返回一个js对象) document.getElementById() 通过id document.getElementsByName() 通过name值 document.getElementsByTagName() 通过标签名 document.getElementsByClassName()通过class值 <button id="btn">id-btn</button> <button >btn</button> <button >btn</button> <button >btn</button> <script> var btnDom = document.getElementsByTagName('button'); console.log(btnDom); //找出来的东西叫集合 类似是数组 for(var i in btnDom){ //用for in 遍历的时候 全出来了 if(isNaN(i)){ //需要判断非数字的跳过 continue; } console.log(btnDom[i]); } console.log('-----------------'); for(var i =0;i<btnDom.length;i++){ //这种遍历不用判断 console.log

asp.net core razor自定义taghelper

匿名 (未验证) 提交于 2019-12-02 22:09:29
又一个新的名词(taghelper),通过taghelper是可以操作html标签、条件输出、更是自由添加内外元素。当然也内置了挺多的asp-开头的taghelper。 下面文章中也简单的带大家实现一个taghelper; 创建自定义html元素 创建一个类ButtonTagHelper tagName为标签名称,下面创建一个button标签 using Microsoft . AspNetCore . Razor . TagHelpers ; namespace Ctrl . Core . Tag . Controls . Button { [ HtmlTargetElement ( "test-button" )] public class ButtonTagHelper : TagHelper { public override void Process ( TagHelperContext context , TagHelperOutput output ) { output . TagName = "button" ; base . Process ( context , output ); } } } 注册taghelper 创建完后可没法执行使用哦,在.cshtml通过某个标签比如form标签输入asp-,下面立刻就出现了一个列表 asp-....

Bootstrap布局

試著忘記壹切 提交于 2019-12-02 16:54:54
目录 Bootstrap布局 1 概览 1.1 移动设备优先 1.2 Normalize.css 1.3 布局容器 2 栅格系统 2.1 栅格系统简介 2.2 栅格参数 2.3 栅格系统使用 2.4 不同屏幕设置不同宽度 2.5 列偏移 2.6 列位置移动 3 排版 3.1 标题 3.2 突出显示 3.3 对齐 3.4 改变大小写 3.5 引用 3.6 列表 4 代码 4.1 内联代码 4.2 用户输入 4.3 代码块 4.3 变量 4.4 程序输出 5 表格 5.1 基本 5.2 条纹状表格 5.3 带边框的表格 5.4 鼠标悬停 5.5 紧缩表格 5.6 状态类 5.7 响应式表格 6 表单 6.1 基本实例 6.2 内联表单 6.3 水平排列的表单 6.4 表单控件 7 按钮 7.1 可作为按钮使用的标签或元素 7.2 预定义样式 7.3 尺寸 7.4 激活状态 7.5 禁用状态 8 图片 8.1 响应式图片 8.2 图片形状 9 辅助类 9.1 文本颜色 9.2 背景色 9.3 三角符号 9.4 浮动 9.5 让内容块居中 9.6 清除浮动 9.7 显示或隐藏内容 9.10 图片替换 10 响应式工具 10.1 不同视口下隐藏显示 10.2 打印类 Bootstrap布局 1 概览 1.1 移动设备优先 为了确保适当的绘制和触屏缩放,需要在 <head> 之中 添加

Bootstrap组件

你离开我真会死。 提交于 2019-12-02 16:54:35
目录 Bootstrap组件 1 Glyphicons 字体图标 2 下拉菜单 2.1 基本使用 2.2 对齐 2.3 标题 2.4 分割线 2.5 禁用的菜单项 3 按钮组 3.1 基本使用 3.2 按钮工具栏 3.3 尺寸 3.4 嵌套下拉菜单 3.5 垂直排列 3.6 两端对齐排列的按钮组 4 按钮式下拉菜单 4.1 单按钮下拉菜单 4.2 分列式按钮下拉菜单 4.3 尺寸 4.4 向上弹出菜单 5 输入框组 5.1 基本使用 5.2 尺寸 5.3 作为额外元素的多选框和单选框 5.4 作为额外元素的按钮 5.5 作为额外元素的按钮式下拉菜单 5.6 作为额外元素的分裂式按钮下拉菜单 5.7 一个方向多个按钮 6 导航Tab 6.1 标签页 6.2 胶囊式标签页 6.3 两端对齐的标签页 6.4 禁用的链接 6.5 带下拉菜单的标签页 7 导航条 7.1 基本使用 7.2 品牌图标 7.3 表单 7.4 按钮 7.5 文本 7.6 非导航的链接 7.7 组件排列 7.8 固定在顶部 7.9 固定在底部 7.10 静止在顶部 7.11 反色 8 路径导航 9 分页 9.1 默认分页 9.2 翻页 10 标签 10.1 基本使用 10.2 各种颜色的标签 11 徽章 12 巨幕 13 页头 14 缩略图 14.1 基本样式 14.2 带内容的缩略图 15 警告框 15.1

Bootstrap应用核心

假装没事ソ 提交于 2019-12-02 16:04:05
Bootstrap是当前世界最受欢迎的响应式、移动设备优先的门户和应用前端框架。它不是单一的CSS或JavaScript框架,而是完整的HTML、CSS、JavaScript框架,你可以仅通过Bootstrap简单、快速的开发移动设备优先的响应式布局页面和应用。 一  Bootstrap简介    1,bootstrap文件目录   你可以在Bootstrap官网,下载不同版本的文件包,现在最新的版本是4.3.x。解压文件后有两个子文件夹,CSS和JS,他们的目录如下:   所有文件都有普通版和压缩版。.min的即是压缩版,去除了空白字符等,使文件更小。.map是Source map文件,需要特定的工具才可以使用。关于Source map文件详细情况可以参考这里 阮一峰博客 。或 戳这里 。   bootstrap.css是Bootstrap的核心CSS文件,一般根据需要选择bootstrap.css或bootstrap.min.css即可。bootstrap-grid.css是Bootstrap提供的单独使用其栅格系统的CSS文件。bootstrap.reboot.css则仅做引导(初始化)文件使用。 核心CSS文件包含了grid和reboot文件 。   bootstrap.js是Bootstrap提供的核心JS文件,而bootstrap.bundle.js与bootstrap

微信小程序去除Button默认样式

人走茶凉 提交于 2019-12-02 15:58:55
在小程序开发过程中,使用率蛮高的组件button,因为经常要去除默认样式,然后再自定义样式,所以经常写,自己也总结分享一下简单的实现步骤。 (一)实现效果 1、实现前(默认样式): 2、实现后(去除默认边框和背景色): (二)实现过程 首先了解一下默认的样式有哪些,然后根据自己的UI来实现: button { position : relative ; display : block ; margin-left : auto ; margin-right : auto ; padding-left : 14px ; padding-right : 14px ; box-sizing : border-box ; font-size : 18px ; text-align : center ; text-decoration : none ; line-height : 2.55555556 ; border-radius : 5px ; -webkit-tap-highlight-color : transparent ; overflow : hidden ; color : #000000 ; background-color : #F8F8F8 ; } 1、使用 ::after 伪类选择器,因为button的边框样式是通过 ::after 方式实现的

Bootstrap应用核心

耗尽温柔 提交于 2019-12-02 15:42:47
Bootstrap是当前世界最受欢迎的响应式、移动设备优先的门户和应用前端框架。它不是单一的CSS或JavaScript框架,而是完整的HTML、CSS、JavaScript框架,你可以仅通过Bootstrap简单、快速的开发移动设备优先的响应式布局页面和应用。 一  Bootstrap简介    1,bootstrap文件目录   你可以在Bootstrap官网,下载不同版本的文件包,现在最新的版本是4.3.x。解压文件后有两个子文件夹,CSS和JS,他们的目录如下:            所有文件都有普通版和压缩版。.min的即是压缩版,去除了空白字符等,使文件更小。.map是Source map文件,需要特定的工具才可以使用。关于Source map文件详细情况可以参考这里 阮一峰博客 。或 戳这里 。   bootstrap.css是Bootstrap的核心CSS文件,一般根据需要选择bootstrap.css或bootstrap.min.css即可。bootstrap-grid.css是Bootstrap提供的单独使用其栅格系统的CSS文件。bootstrap.reboot.css则仅做引导(初始化)文件使用。 核心CSS文件包含了grid和reboot文件 。   bootstrap.js是Bootstrap提供的核心JS文件,而bootstrap.bundle

手把手教你进行微信小程序开发案例1---计算器

戏子无情 提交于 2019-12-02 14:30:44
由于之前的文章中已经教会了大家如何注册自己的一个微信小程序,并且利用微信开发工具进行小程序的开发,所以这里不再介绍如何下载工具和注册账号,不懂的小伙伴们可以观看我之前发过的教程哦。 #####下面我将手把手地教大家如何开发自己的第一个微信小程序实例–计算器 注意:在代码块中的/xxx或//xxx代表着注释,不是代码的一部分!! 第一步 打开我们的微信开发工具(之前的教程有,这里就不再重新交) 第二步 我们直接选择打开miniprogram-4小程序 第三步 我们直接点击我们看到的app.json,如下图所示,我们不用右击一个一个创建目录、.js、.json、.wxml、.wxss。直接输入我们要创建的页面路径,具体操作如下代码块所示 /*直接将"pages":[参数]中的参数删除,我们要创建界面在pages下,名称为a2的界面。@是更改的内容*/ "pages": [ "pages/a2/a2" /@直接在这里创建目录(系统会自动补充四个文件) ], "window": { "backgroundTextStyle": "light",/下拉背景字体,loading图的样式,仅支持(light/dark) "navigationBarBackgroundColor": "#fff",/导航栏背景颜色(#000000) "navigationBarTitleText":

关于按钮disabled样式的修改

三世轮回 提交于 2019-12-02 11:11:22
在实际工作中,会遇到按钮点击前后样式不一致的情况,以验证码获取为例; 1.按钮点击前的样式 2.点击后的样式 具体代码如下所示 1.xml代码部分如下 <button formType='submit' disabled='{{disabled}}' class="submit_btn" hover-class="button-hover" >提交注册</button> 2.css代码部分如下 .submit_btn{ width: 670rpx; height: 90rpx; color: #ffffff; font-size: 38rpx; line-height: 90rpx; border-radius:54rpx; text-align: center; margin-top: 50rpx; background-color: #2EA7E0; } //去除按钮的默认边框 .submit_btn::after{ border:none; } /* 按钮被按下去的颜色 */ .button-hover{ background-color: #96d3ef; } /* 按钮disabled的样式 */ button[disabled], wx-button[disabled]:not([type]) { color: #2EA7E0; border: none;

类似轮播图的简单jQuery代码

会有一股神秘感。 提交于 2019-12-02 09:38:41
代码和个人解析: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> img { width: 300px; height: 300px; }    /* 这里设置样式只是为了使图片在点击时不会出现图片大小不一的情况,img可以统一设置页面中所有的图片大小 */ </style> </head> <body> <img src="./img/1.jpg" />            <!-- 这里有一个要注意的点,图片的名称要变成连贯的数字序号排列 --> <button>上一张</button> <button>下一张</button> <script src="./js/jquery-3.4.1.js"></script> <script> $(function() { var t = 1;   //定义一个变量用来进行判断 //上一张的按钮实现 $("button").eq(0).click