09 bootstrap快速搭建前端 _BootStrap

古人已用三冬足，年少今开万卷余。这篇文章主要讲述09 bootstrap快速搭建前端相关的知识，希望能为你提供帮助。

""" addClass()classList.add() removeClass() hasClass() toggleClass() """

css操作

.css(属性名,属性值) """ jQuery链式操作一行代码可以搞定很多事情 jQuery对象在调用jQuery方法之后返回的还是当前对象本身 (本质:return self) """
位置操作

scrollTop scrollLeft # 回到顶部 $(window).scrollTop()# 获取 $(window).scrollTop(300)# 设置
尺寸操作

# 文本的高和宽 height() # 文本+padding innerHeight() # 文本+padding+border outterHeight()
【09 bootstrap快速搭建前端】文本操作

""" .text()文本innerText() .html()文本+标签innerHTML() 括号内不加参数就是获取加了就是设置 """ """ 获取值 .val()value 获取文件数据转成标签对象.files """
属性操作

""" .attr() .attr(\'class\')getAttribute .attr(\'class\',\'c1\')setAttribute .removeAttr()removeAttribute# 针对checkbox、radio、option选中的checked、selected属性不要用attr 建议你使用prop() prop(\'checked\') prop(\'checked\',true/false) """
文档处理

# jQuery如何创建标签 document.createElement(\'p\')===$(\'< p> \')A.append(B) B.appendTo(A)prepend() prependTo()...remove()移除标签 empty()清空标签内部所有的内容
事件处理

# jQuery两种绑定事件的方式 # 第一种 $(\'#d1\').click(function(){}) # 第二种 $(\'#d1\').on(\'click\',function(){})""" this 指代的就是当前被操作对象本身(有点像面向对象的self) """ # 克隆事件 clone()默认情况下只克隆标签和文本不克隆事件 clone(true) # 自定义模态框绑定事件控制标签类属性的添加和删除 # 左侧菜单一行代码搞定 # 返回顶部 $(window).scroll(function(){}) # 自定义登陆校验功能 .val() # hover事件 $(\'#d1\').hover(function(){})# 进出都会触发$(\'#d1\').hover( function(){}, function(){} ) # input框实时监控输入内容事件 $(\'#d1\').on(\'input\',function(){}) # 键盘按键事件 $(window).keydown(function(event){ event.keyCode }) $(window).keyup(function(){})""" web领域永远没有绝对的安全！！！ """

今日内容概要

jQuery结束
前端框架Bootstrap
手动搭建一个图书管理系统页面

阻止后续事件执行

< script> $(\'#d2\').click(function (e) { $(\'#d1\').text(\'宝贝你能看到我吗?\') // 阻止标签后续事件的执行方式1 // return false // 阻止标签后续事件的执行方式2 // e.preventDefault() }) < /script>

阻止事件冒泡

< script> $(\'#d1\').click(function () { alert(\'div\') }) $(\'#d2\').click(function () { alert(\'p\') }) $(\'#d3\').click(function (e) { alert(\'span\') // 阻止事件冒泡的方式1 // return false // 阻止事件冒泡的方式2 // e.stopPropagation() }) < /script>

事件委托

< button> 是兄弟，就来砍我!!!< /button> < script> // 给页面上所有的button标签绑定点击事件 // $(\'button\').click(function () {// 无法影响到动态创建的标签 //alert(123) // })// 事件委托 $(\'body\').on(\'click\',\'button\',function () { alert(123)// 在指定的范围内将事件委托给某个标签无论该标签是事先写好的还是后面动态创建的 }) < /script>

页面加载

# 等待页面加载完毕再执行代码 window.onload = function(){ // js代码 }"""jQuery中等待页面加载完毕""" # 第一种 $(document).ready(function(){ // js代码 }) # 第二种 $(function(){ // js代码 }) # 第三种 """直接写在body内部最下方"""

动画效果

$(\'#d1\').hide(5000) w.fn.init [div#d1] $(\'#d1\').show(5000) w.fn.init [div#d1] $(\'#d1\').slideUp(5000) w.fn.init [div#d1] $(\'#d1\').slideDown(5000) w.fn.init [div#d1] $(\'#d1\').fadeOut(5000) w.fn.init [div#d1] $(\'#d1\').fadeIn(5000) w.fn.init [div#d1] $(\'#d1\').fadeTo(5000,0.4) w.fn.init [div#d1]

补充

# each() # 第一种方式 $(\'div\') w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)] $(\'div\').each(function(index){console.log(index)}) VM181:1 0 VM181:1 1 VM181:1 2 VM181:1 3 VM181:1 4 VM181:1 5 VM181:1 6 VM181:1 7 VM181:1 8 VM181:1 9$(\'div\').each(function(index,obj){console.log(index,obj)}) VM243:1 0 < div> ?1?< /div> ? VM243:1 1 < div> ?2?< /div> ? VM243:1 2 < div> ?3?< /div> ? VM243:1 3 < div> ?4?< /div> ? VM243:1 4 < div> ?5?< /div> ? VM243:1 5 < div> ?6?< /div> ? VM243:1 6 < div> ?7?< /div> ? VM243:1 7 < div> ?8?< /div> ? VM243:1 8 < div> ?9?< /div> ? VM243:1 9 < div> ?10?< /div> ?# 第二种方式 $.each([111,222,333],function(index,obj){console.log(index,obj)}) VM484:1 0 111 VM484:1 1 222 VM484:1 2 333 (3) [111, 222, 333] """ 有了each之后就无需自己写for循环了用它更加的方便 """ # data() """ 能够让标签帮我们存储数据并且用户肉眼看不见 """ $(\'div\').data(\'info\',\'回来吧，我原谅你了!\') w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]$(\'div\').first().data(\'info\') "回来吧，我原谅你了!" $(\'div\').last().data(\'info\') "回来吧，我原谅你了!"$(\'div\').first().data(\'xxx\') undefined $(\'div\').first().removeData(\'info\') w.fn.init [div#d1, prevObject: w.fn.init(10)]$(\'div\').first().data(\'info\') undefined $(\'div\').last().data(\'info\') "回来吧，我原谅你了!"

前端框架Bootstrap该框架已经帮你写好了很多页面样式，你如果需要使用，只需要下载它对应文件，之后直接cv拷贝即可
在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可
版本选择建议使用v3版本：< https://v3.bootcss.com/>
注意
bootstrap的js代码是依赖于jQuery的，也就意味着你在使用Bootstrap动态效果的时候，一定要导入jQuery
布局容器

< div class="container"> 左右两侧有留白 < /div> < div class="container-fluid"> 左右两侧没有留白 < /div> # 后续在使用bootstrap做页面的时候上来先写一个div class=container,之后在div内部书写页面

栅格系统

< div class="row"> < /div> 写一个row就是将所在的区域划分成12份< div class="col-md-6 "> 获取你所要的份数 # 在使用bootstrap的时候脑子里面一定要做12的加减法

栅格参数

.col-xs-.col-sm-.col-md-.col-lg- # 针对不同的显示器 bootstrap会自动选择对应的参数 # 如果你想要兼容所有的显示器你就全部加上即可# 在一行如何移动位置 < div class="col-md-8 c1 col-md-offset-2"> < /div>

排版
bootstrap将所有原生的HTML标签的文本字体统一设置成了肉眼可以接受的样式
效果一样，但是标签表达的意思不一样（语义）
表格

< table class="table table-hover table-striped table-bordered"> < tr class="success"> < td> 1< /td> < td> jason< /td> < td> 123< /td> < td> study< /td> < /tr> < tr class="active"> ...< /tr> < tr class="success"> ...< /tr> < tr class="warning"> ...< /tr> < tr class="danger"> ...< /tr> < tr class="info"> ...< /tr>

表单

< div class="container"> < div class="col-md-8 col-md-offset-2"> < h2 class="text-center"> 登陆页面< /h2> < form action=""> < p> username:< input type="text" class="form-control"> < /p> < p> password:< input type="text" class="form-control"> < /p> < p> < select name="" id="" class="form-control"> < option value=""> 111< /option> < option value=""> 222< /option> < option value=""> 333< /option> < /select> < /p> < textarea name="" id="" cols="30" rows="10" class="form-control"> < /textarea> < input type="submit"> < /form> < /div> < /div> # 针对表单标签加样式就用form-control class="form-control" """ < input type="checkbox"> 222 < input type="radio"> 333 checkbox和radio我们一般不会给它加form-control，直接使用原生的即可 """# 针对报错信息可以加has-error（input的父标签加） < p class="has-error"> username: < input type="text" class="form-control"> < /p>

按钮

< a rel="nofollow" href="https://www.mzitu.com/" class="btn btn-primary"> 点我< /a> < button class="btn btn-danger"> 按我< /button> < button class="btn btn-default"> 按我< /button> < button class="btn btn-success"> 按我< /button> < button class="btn btn-info"> 按我< /button> < button class="btn btn-warning"> 按我< /button> < button class="btn btn-warning btn-lg"> 按我< /button> < button class="btn btn-warning btn-sm"> 按我< /button> < button class="btn btn-warning btn-xs"> 按我< /button> < input type="submit" class="btn btn-primary btn-block"> 通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

图表

< h2 class="text-center"> 登陆页面 < span class="glyphicon glyphicon-user"> < /span> < /h2> < style> span { color: greenyellow; } < /style> # 扩展

导航条

< nav class="navbar navbar-inverse"> < nav class="navbar navbar-default">

分页器

< nav aria-label="Page navigation"> < ul class="pagination"> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#" aria-label="Previous"> < span aria-hidden="true"> & laquo; < /span> < /a> < /li> < li class="active"> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> 1< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> 2< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> 3< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> 4< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> 5< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#" aria-label="Next"> < span aria-hidden="true"> & raquo; < /span> < /a> < /li> < /ul> < /nav>

弹框

https://lipis.github.io/bootstrap-sweetalert/swal(\'你还好吗?\') undefined swal(\'你还好吗?\') undefined swal(\'你还好吗?\',\'我不好，想你了!\') undefined swal(\'你还好吗?\',\'我不好，想你了!\',\'success\') undefined swal(\'你还好吗?\',\'我不好，想你了!\',\'warning\') undefined swal(\'你还好吗?\',\'我不好，想你了!\',\'error\') undefined swal(\'你还好吗?\',\'我不好，想你了!\',\'info\') undefined # 我们在后面的课程中还会涉及到该部分内容

作业