我的Python之路-day16
一、上节作业代码demo
html文件代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .edit-mode{ background-color: #b3b3b3; padding: 8px; text-decoration: none; color: white; } .editing{ background-color: #f0ad4e; } </style> </head> <body> <div style="padding: 20px"> <input type="button" onclick="CheckAll('#edit_mode', '#tb1');" value="全选" /> <input type="button" onclick="CheckReverse('#edit_mode', '#tb1');" value="反选" /> <input type="button" onclick="CheckCancel('#edit_mode', '#tb1');" value="取消" /> <a id="edit_mode" class="edit-mode" href="javascript:void(0);" onclick="EditMode(this, '#tb1');">进入编辑模式</a> </div> <table border="1"> <thead> <tr> <th>选择</th> <th>主机名</th> <th>端口</th> <th>业务</th> <th>状态</th> </tr> </thead> <tbody id="tb1"> <tr> <td><input type="checkbox" /></td> <td edit="true">v1 </td> <td>v11</td> <td edit="true" edit-type="select" global-key="BUSINESS" select-val="2" >二手车</td> <td edit="true" edit-type="select" global-key="STATUS" select-val="1" >在线</td> </tr> <tr> <td><input type="checkbox" /></td> <td edit="true">v1</td> <td>v11</td> <td edit="true" edit-type="select" global-key="BUSINESS" select-val="3">大保健</td> <td edit="true" edit-type="select" global-key="STATUS" select-val="1" >在线</td> </tr> <tr> <td><input type="checkbox" /></td> <td edit="true">v1</td> <td>v11</td> <td edit="true" edit-type="select" global-key="BUSINESS" select-val="3">大保健</td> <td edit="true" edit-type="select" global-key="STATUS" select-val="2" >下线</td> </tr> </tbody> </table> <script src="js/jquery-1.8.2.js"></script> <script src="js/edit_row.js"></script> </body> </html>
JS代码：
STATUS = [ {'id': 1, 'text': "在线"}, {'id': 2, 'text': "下线"} ]; BUSINESS = [ {'id': 1, 'text': "车上会"}, {'id': 2, 'text': "二手车"}, {'id': 3, 'text': "大保健"} ]; //$(function(){ // $('#tb1').find(':checkbox').click(function(){ // var tr = $(this).parent().parent(); // if($("edit_mode").hasClass('editing')){ // if($(this).prop('checked')){ // //当前行进入编辑状态 // RowIntoEditMode(tr); // }else{ // //当前行退出编辑状态 // RowOutEditMode(tr); // } // } // }); //}); $(function(){ // checkbox默认事件优先，然后执行自定义的事件 $('#tb1').find(':checkbox').click(function(){ var tr = $(this).parent().parent(); if($("#edit_mode").hasClass('editing')){ if($(this).prop('checked')){ // 当前行进入编辑状态 RowIntoEditMode(tr); }else{ // 当前行退出编辑状态 RowOutEditMode(tr); } } }); }); function RowIntoEditMode(tr){ tr.children().each(function(){ var td = $(this); if(td.attr('edit') == 'true'){ if(td.attr('edit-type') == "select"){ var all_values = window[td.attr('global-key')]; var select_val = td.attr('select-val'); select_val = parseInt(select_val); var options = ""; $.each(all_values,function(index,value){ if(select_val == value.id){ options += "<option selected='select'>" + value.text + "</option>"; }else{ options += "<option>" + value.text + "</option>"; } }); var temp = "<select>" + options + "</select>"; td.html(temp); }else{ var text =td.text(); var temp = "<input type='text' value='" +text+ "'/>"; td.html(temp); } } }); } function RowOutEditMode(tr){ tr.children().each(function(){ var td = $(this); if(td.attr('edit') == 'true'){ var inp = td.children(':first'); var input_val = inp.val(); td.text(input_val); } }); } //function CheckAll(mode,tb){ // //1、选中checkbox // //2、如果已经进入编辑模式，让选中行进入编辑状态 // //tb=#tb1 // //$（tb） = $('#tb1') // $(tb).children().each(function(){ // //$(this)表示循环过程中，每一个tr，每一行数据 // var tr = $(this); // var isChecked = $(this).find(':checkbox').prop('checked'); // if(isChecked==true){ // }else{ // $(this).find(':checkbox').prop('checked',true); // //如果已经进入编辑模式，让选中行进入编辑状态 // var isEditMode = $(mode).hasClass('editing'); // if(isEditMode){ // //行进入编辑状态 // tr.children().each(function(){ // var td=$(this); // if(td.attr('edit') == 'true'){ // var text = td.text(); // var temp = "<input type='text' value='" +text+ "'/>"; // td.html(temp); // } // }) // } // } // }); //} //function CheckReverse(mode,tb){ // // 是否进入了编辑模式 // if($(mode).hasClass("editing")){ // $(tb).children().each(function(){ // // 遍历所有tr // var tr = $(this); // var check_box = tr.children().first().find(":checkbox"); // if(check_box.prop("checked")){ // check_box.prop("checked", false); // tr.children().each(function(){ // var td = $(this); // if(td.attr("edit") == "true"){ // var inp = td.children(":first"); // var input_value = inp.val(); // td.text(input_value); // } // }); // }else{ // check_box.prop("checked", true); // // RowIntoEdit // tr.children().each(function(){ // var td = $(this); // if(td.attr("edit") == "true"){ // var text = td.text(); // var temp = "<input type='text' value='" +text+ "' />"; // td.html(temp); // } // }); // } // }); // }else{ // $(tb).children().each(function(){ // var tr = $(this); // var check_box = tr.children().first().find(":checkbox"); // if(check_box.prop("checked")){ // check_box.prop("checked",false); // }else{ // check_box.prop("checked",true); // } // }); // } // //} //function CheckCancel(mode,tb){ // //1、取消选中checkbx // //2、如果已经进入编辑模式，行退出编辑状态 // $(tb).children().each(function(){ // var tr = $(this); // if(tr.find(':checkbox').prop('checked')){ // //移除选中 // tr.find(':checkbox').prop('checked',false); // var isEditing = $(mode).hasClass('editing'); // if(isEditing == true){ // //当前行。退出编辑状态 // tr.children().each(function(){ // var td = $(this); // if(td.attr('edit')=='true'){ // var inp = td.children(':first'); // var input_value = inp.val(); // td.text(input_value); // } // }) // } // } // }) //} //function EditMode(ths,tb){ // var isEditing = $(ths).hasClass('editing'); // if(isEditing){ // //退出编辑模式 // $(ths).text('进入编辑模式'); // $(ths).removeClass('editing'); // $(tb).children().each(function(){ // var tr = $(this); // if(tr.find(':checkbox').prop('checked')){ // //当前行退出编辑状态 // tr.children().each(function(){ // var td = $(this); // if(td.attr('edit') == 'true'){ // var inp = td.children(':first'); // var input_value = inp.val(); // td.text(input_value); // } // }); // } // }); // }else{ // //进入编辑模式 // $(ths).text('退出编辑模式'); // $(ths).addClass('editing'); // $(tb).children().each(function(){ // //$(this)表示循环过程中，每一个tr，每一行数据 // var tr = $(this); // var isChecked = $(this).find(':checkbox').prop('checked'); // if(isChecked==true){ // tr.children().each(function(){ // var td = $(this); // if(td.attr('edit') == 'true'){ // var text = td.text(); // var temp = "<input type='text' value='" +text+ "' />"; // td.html(temp); // } // }) // } // }); // // } //} function CheckAll(mode, tb){ // 1、选中checkbox // 2、如果已经进入编辑模式，让选中行进入编辑状态 // tb = #tb1 //$(tb) = $('#tb1') $(tb).children().each(function(){ // $(this) 表示循环过程中,每一个tr，每一行数据 var tr = $(this); var isChecked = $(this).find(':checkbox').prop('checked'); if(isChecked==true){ }else{ $(this).find(':checkbox').prop('checked',true); // 如果已经进入编辑模式，让选中行进入编辑状态 var isEditMode = $(mode).hasClass('editing'); if(isEditMode){ // 当前行进入编辑状态 RowIntoEditMode(tr); } } }); } function CheckReverse(mode, tb){ // 是否进入了编辑模式 if($(mode).hasClass('editing')){ $(tb).children().each(function(){ // 遍历所有tr var tr = $(this); var check_box = tr.children().first().find(':checkbox'); if(check_box.prop('checked')){ check_box.prop('checked',false); RowOutEditMode(tr); }else{ check_box.prop('checked',true); RowIntoEditMode(tr); } }); }else{ // $(tb).children().each(function(){ var tr = $(this); var check_box = tr.children().first().find(':checkbox'); if(check_box.prop('checked')){ check_box.prop('checked',false); }else{ check_box.prop('checked',true); } }); } } function CheckCancel(mode, tb){ // 1、取消选中checkbox // 2、如果已经进入编辑模式，行推出编辑状态 $(tb).children().each(function(){ var tr = $(this); if(tr.find(':checkbox').prop('checked')){ // 移除选中 tr.find(':checkbox').prop('checked', false); var isEditing = $(mode).hasClass('editing'); if(isEditing == true){ // 当前行，推出编辑状态 RowOutEditMode(tr); } } }); } function EditMode(ths, tb){ // ths =this, var isEditing = $(ths).hasClass('editing'); if(isEditing){ // 退出编辑模式 $(ths).text('进入编辑模式'); $(ths).removeClass('editing'); $(tb).children().each(function(){ var tr = $(this); if(tr.find(':checkbox').prop('checked')){ // 当前行，退出编辑状态 RowOutEditMode(tr); } }); }else{ // 进入编辑模式 $(ths).text('退出编辑模式'); $(ths).addClass('editing'); $(tb).children().each(function(){ // $(this) 表示循环过程中,每一个tr，每一行数据 var tr = $(this); var isChecked = $(this).find(':checkbox').prop('checked'); if(isChecked==true){ // 当前行进入编辑状态 RowIntoEditMode(tr); } }); } }
二、bootstar介绍
1、介绍
Bootstrap 是一个用于构建响应式网站的前端框架。无论你想构建应用 程序、博客还是 CMS 网站,Bootstrap 都完美适用,只要你想得到, 它都能行。Bootstrap 把 HTML、CSS 和 JavaScript 组合起来,为构建 稳定的网站提供了基础设施,也能提高开发效率。基于默认的网格系 统,布局变成了小菜一碟,按钮、导航和表格也都活脱脱地赏心悦目。 十几个 JavaScript 插件更为我们赋予网站交互能力提供了强大保障。
响应式布局：根据用户设备的不同，进行相应的布局
Bootstrap 是 Mark Otto 和 Jacob Thornton 共同开发的一个开源框架。 最初发布 Bootstrap 的时候,他们两位都在 Twitter 工作。当时,他 们面临着为公司内部提供一套标准化的前端开发工具的需求。在发布 Bootstrap 的那篇博客中,Mark Otto 这样介绍他们的新项目:
Twitter诞生初期,为了完成前端开发任务,工程师们几乎尝试 了自己熟悉的所有库。应用之间的不一致性导致它们难以扩 展和维护。Bootstrap最初就是这个问题的一个解决方案,而且 在Twitter内部第一次Hackweek上得到了认可。Hackweek结束 后,我们手头上的项目已经相当稳定,可以在公司内部部署使 用了。
Bootstrap 是 2011 年 8 月发布的,发布之后就迅速走红。而且,它也 从最初 CSS 驱动的项目,发展到内置了很多 JavaScript 插件和图标, 并且涵盖了表单和按钮元素。Bootstrap 本身支持响应式 Web 设计, 而且拥有一个非常稳健的 12 列、940 像素宽的网格布局系统。值得一 提的是,Bootstrap 网站(http://getbootstrap.com)上还提供了一个构 建工具,让你根据自己的需求选择 CSS 和 JavaScript 功能。所有这一 切让前端 Web 开发有了前瞻性的设计和开发基础,开发效率倍增。上 手使用 Bootstrap 非常简单,跟在网站中整合 CSS 和 JavaScript 没有 什么区别。
2、文件结构：
bootstrap2 ├── css │ ├── bootstrap-responsive.css │ ├── bootstrap-responsive.min.css │ ├── bootstrap.css │ └── bootstrap.min.css ├── img │ ├── glyphicons-halflings-white.png │ └── glyphicons-halflings.png └── js ├── bootstrap.js └── bootstrap.min.js bootstrap3 ├── css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ ├── bootstrap.css │ ├── bootstrap.css.map │ └── bootstrap.min.css ├── fonts │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff │ └── glyphicons-halflings-regular.woff2 └── js ├── bootstrap.js ├── bootstrap.min.js └── npm.js
3、伪类：
答：伪元素（注意，不是伪类）。 它虽然被收录到css3标准中，但其实主流浏览器都已经支持伪元素了，这其中包括了IE8+。 伪元素实际上在html dom中不存在，但会被浏览器渲染成html的一个节点，比如题主提到的#twitter:before，就是在#twitter这个标签里的开始处插入了一个子元素（节点），同理，:after是在该元素的最后插入子元素，
4、使用：
Bootstrap 插件全部依赖 jQuery请注意，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入
5、bootstrp框架基本使用
<!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"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" 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]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
6、逻辑判断
and，且
not，非
only，只有
7、媒体功能
aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率 color 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0 color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0 device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。 device-height 定义输出设备的屏幕可见高度。 device-width 定义输出设备的屏幕可见宽度。 grid 用来查询输出设备是否使用栅格或点阵。 height 定义输出设备中的页面可见区域高度。 max-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。 max-color 定义输出设备每一组彩色原件的最大个数。 max-color-index 定义在输出设备的彩色查询表中的最大条目数。 max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。 max-device-height 定义输出设备的屏幕可见的最大高度。 max-device-width 定义输出设备的屏幕最大可见宽度。 max-height 定义输出设备中的页面最大可见区域高度。 max-monochrome 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。 max-resolution 定义设备的最大分辨率。 max-width 定义输出设备中的页面最大可见区域宽度。 min-aspect-ratio 定义输出设备中的页面可见区域宽度与高度的最小比率。 min-color 定义输出设备每一组彩色原件的最小个数。 min-color-index 定义在输出设备的彩色查询表中的最小条目数。 min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。 min-device-width 定义输出设备的屏幕最小可见宽度。 min-device-height 定义输出设备的屏幕的最小可见高度。 min-height 定义输出设备中的页面最小可见区域高度。 min-monochrome 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数 min-resolution 定义设备的最小分辨率。 min-width 定义输出设备中的页面最小可见区域宽度。 monochrome 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0 orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。 resolution 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm scan 定义电视类设备的扫描工序。 width 定义输出设备中的页面可见区域宽度。
8、内容
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428
中心内容
.lead 将字体大小、加粗、行高修改 （无卵高深用）
标记
mark标签高亮内容 <mark>highlight</mark>
删除内容
del标签删除内容（横线）
<del>This line of text is meant to be treated as deleted text.</del>
无用文本
s 标签（横线）
<s>This line of text is meant to be treated as deleted text.</s>
同删除内容
插入文本
ins标签（下划线）
<ins>This line of text is meant to be treated as an addition to the document.</ins>
带下划线的文本
u标签
<u>This line of text will render as underlined</u>
小号文本
small标签，父容器字体大小的 85% （标题的small是指定的大小）
着重
strong标签
斜体
em标签
对齐
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">左右对齐</p>
<p class="text-nowrap">不换行</p>
大小写
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
缩略语
<abbr title="attribute">attr</abbr>
首字母缩略语
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
地址
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:424662508@qq.com">424662508@qq.com</a>
</address>
引用
blockquote标签
<footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
右对齐效果
.blockquote-reverse
无序列表
<ul>
<li>...</li>
</ul>
有序列表
<ol>
<li>...</li>
</ol>
无样式列表
<ul class="list-unstyled">
<li>...</li>
</ul>
内联列表
<ul class="list-inline">
<li>...</li>
</ul>
描述列表
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
水平排列的描述
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
-- 自动截断：text-overflow: ellipsis;
-- 不换行：white-space: nowrap;
用户输入
<kbd> 标签
代码块
<pre> 标签
.pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条
变量
var 标签
程序输出
标签
其他详见：http://v3.bootcss.com/
浙公网安备 33010602011771号