button样式 | 易学教程

bootstrap小结

阅读更多关于 bootstrap小结

11月23日天气：温和心情：还好心态：没崩（因为半天就可以回家了）最近一周温习了bootstrap的种种，基本算是搞完了。 **附上今天随手做的小练习：** [机试题.zip][1] [1]: https://www.zhushuaiqi.xyz/usr/uploads/2019/11/866022028.zip 还有一个项目等着去做，所以先做一个简单些的bootstrap总结。具体如下： **叨叨半天了，正题：** ## 基础部分 ## 1.首先是引入，这个不用说了，link。 2.其次是 js 的引入，由于我上官网查找了一翻，发现 bt 的所有 js，插件等等都是基于 jQ 写的，所以注意引入不管什么插件都要先引入 jQ。基于媒体查询 3.row 为行，col 为列，一个 row 中有 12 等份的 col，安排份数超过 12 行就换行。默认居中 4.对应媒体查询： xs：超小屏幕（<768px）xs sm：小屏幕（>=768px<992px）sm md：中等屏幕（>=992px<1200px）md lg：大屏幕（>=1200px）lg 5.row col 等份不能加小数点（亲测）。 **6.样式因为是封装好的，调整源码需要翻几 w 甚至更多行代码（具体没看），所以我在测试阶段就赶紧试了样式微调，因为封装的虽多，但是毕竟多的不一定就是你想要的，然后发现！样式可控

reset.css文件下载及剖析

阅读更多关于 reset.css文件下载及剖析

@charset "utf-8"; /* http://meyerweb.com/eric/tools/css/reset/ v2.0-modified | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark,

jQuery

阅读更多关于 jQuery

本节笔记推荐学习网站：https://www.w3school.com.cn/jquery/jquery_ajax_load.asp 全选反选取消操作： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="chooseAll();" /> <input type="button" value="反选" onclick="reverseAll();" /> <input type="button" value="取消" onclick="cancleAll();" /> <table border="1"> <thead> <tr> <td>选择</td> <td>主机IP</td> <td>PORT</td> </tr> </thead> <tbody id="i1"> <tr> <td> <input type="checkbox" /> </td> <td>192.168.1.3</td> <td>22</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>192.168.1.4</td>

day15

阅读更多关于 day15

day 48 Bootstrap https://v3.bootcss.com 布局容器使用前端框架之后所有标签样式的调整全部是通过class属性值来的 <div class="container"></div> 左右两边留白 <div class="container-fluid"></div> 全屏显示栅格系统默认情况下一个row就是一行每个row默认会均分成12份你可以通过col-md-Num 来选择你想要占几份你当前已经占了几份还剩几份 (12份) 栅格参数 xs sm md lg 起手写的两句代码 <div class="container-fluid"> <div class="row"> ... </div> </div> 列偏移 col-md-offset-3 表格表单表单加样式你只需要记一个 form-control 浮动 pull-left 左浮动 pull-right 右浮动按钮组 btn btn-颜色 !important 执行优先级最高 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>前端</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"><

4.4、Bootstrap V4自学之路------组件---表单

阅读更多关于 4.4、Bootstrap V4自学之路------组件---表单

表单控件下面是一个Bootstrap支持的表控件以及自定义类的完整列表。额外的文档对每个组都是可用的。类作用支持的变量 .form-group 表单控件的任一组用在任何块级元素上，比如说 <fieldset> 或 <div> .form-control 文本域控件 text 、 password 、 datetime 、 datetime-local 、 date 、 month 、 time 、 week 、 number 、 email 、 url 、 search 、 tel 、 color 选择菜单 multiple 、 size 多行文本域 N/A .form-control-file 文件上传控件 file .radio .radio-inline .checkbox .checkbox-inline 复选框和单选钮 N/A PS：镇山之宝！例子在后续使用中来写！那么一长串的例子，吓死宝宝了。表单布局因为Bootstrap对几乎所有的表单控件都应用了 display:block 以及 width:100% ，所以表单默认是纵向堆叠的。可以用附加的类来基于表单改变这种布局。表单组 .form-group类是向表单添加一些结构的最简单的方法。可是使用在<fieldset>、<div>甚至别的元素上。 <fieldset> 定义围绕表单中元素的边框。

11.20 Bootstrap

阅读更多关于 11.20 Bootstrap

1.动画效果 <div style="height: 1000px;background-color: gold;width: 500px"></div> $('div').show(3000) k.fn.init [div, prevObject: k.fn.init(1)] $('div').show(5000) k.fn.init [div, prevObject: k.fn.init(1)] $('div').slideUp(5000) #滑动 k.fn.init [div, prevObject: k.fn.init(1)] $('div').slideDown(5000) k.fn.init [div, prevObject: k.fn.init(1)] $('div').fadeIn(5000) #淡入淡出 k.fn.init [div, prevObject: k.fn.init(1)] $('div').fadeOut(5000) k.fn.init [div, prevObject: k.fn.init(1)] $('div').fadeTo(5000,0.4) k.fn.init [div, prevObject: k.fn.init(1)] 2.each 一个通用的迭代函数，它可以用来无缝迭代对象和数组。 <body> <div> <p>1</p> <p>2

50 前端学习7之 Bootstrap

阅读更多关于 50 前端学习7之 Bootstrap

目录一、jQuery补充 1. 动画效果 2. 补充 2.1 each循环 2.2 data() 二、Bootstrap 1. 布局容器 2. 栅格系统 2.1 栅格参数 2.2 列偏移 3. 表格 4. 表单 5. 按钮 5.1 预定义样式 6. 快速浮动一、jQuery补充 1. 动画效果 // 基本 show(毫秒数) // 显示 hide(毫秒数) // 隐藏 toggle(毫秒数) // 滑动 slideDown(毫秒数) slideUp(毫秒数) slideToggle(毫秒数) // 淡入淡出 fadeIn(毫秒数) fadeOut(毫秒数) fadeTo(毫秒数) fadeToggle(毫秒数) 2. 补充 2.1 each循环 jQuery.each(collection, callback(indexInArray, valueOfElement))：描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。 li =[10,20,30,40] $.each(li,function(i, v){ console.log(i, v);//index是索引，ele是每次循环的具体元素。 }) 输出： 010 120 230 340

JQuery练习题

阅读更多关于 JQuery练习题

练习题： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery选择器筛选器练习</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <style> .my-padding { padding: 10px 0; } .my-dark { background-color: #f5f5f5; } .footer { background: #111; font-size: 0.9em; position: relative; clear: both; } .my-white { color:

CSS

阅读更多关于 CSS

表单 form > input | label | button | textarea | select form表单属性属性：action 值：url 含义：指定一个表单处理目标URL，表单数据将被提交到该URL地址的处理程序。如果该属性值为空，则提交到文档自身。该属性值可以为绝对地址、相对地址、文档片段，甚至是脚本代码属性：method 值：get或post 含义：将表单数据提交到http服务器的方法，可能值有两个：get和post 属性：enctype 值： application/x-www-form-urlencoded 含义：指定表单数据的编码类型，此属性只有在method属性设置为post时才有效。默认值为application/x-www-form-urlencoded对所有字符进行编码。如果表单包含用于文件上传的控件（input type=“file”），那么这个属性值必须设为multipart/form-data ，不对字符进行编码 input标签 input属性大概介绍: type:按钮的属性 id:标识 name:与后端交互的key values:给后端的值,如果没有name则没法给到后端案例介绍 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单标签</title> <

使用datasest属性改变样式

阅读更多关于使用datasest属性改变样式

使用datasest属性改变样式传统做法对于html中的标签我们可以自定义标签中的属性，例如给input加一个aaa属性 <input type="text" aaa="bbb"> 接下来获取input的属性并在控制台中输出，即： let intype = document.querySelector("input"); console.log("intype.type:"+intype.type); console.log("intype.aaa:"+intype.aaa); 在控制台中可以看到也就是说无法通过元素.属性名的方式直接获取属性aaa的值这时候只能通过元素.getAttribute('属性名') 来获取其属性值，代码入下： console.log("intype.getAttribute('aaa'):"+intype.getAttribute("aaa")); 结果如下而要改变该元素属性的方法则是元素.setAttribute('属性名','属性值') 代码如下 intype.setAttribute("aaa","ddd"); 此时在检查元素可以看到 dataset 而通过 data-属性名这种方法可以自定义属性名并通过 data.属性名获取属性值举例：通过按钮改变背景颜色 <body> <button data-acolor=

订阅 button样式