09 bootstrap快速搭建前端

Posted 30厘米

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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()

  • 文本操作

    """
.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="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="active"><a rel="nofollow" href="#">1</a></li>
    <li><a rel="nofollow" href="#">2</a></li>
    <li><a rel="nofollow" href="#">3</a></li>
    <li><a rel="nofollow" href="#">4</a></li>
    <li><a rel="nofollow" href="#">5</a></li>
    <li>
      <a rel="nofollow" href="#" 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
# 我们在后面的课程中 还会涉及到该部分内容

作业

"""
今日作业
必做题
1.前端框架Bootstrap整体文档看一遍
2.自定义点赞功能，点击按钮旁边的数字动态加一
3.自己尝试着搭建图书管理系统页面
4.自己尝试着搭建jQuery练习题页面
"""

以上是关于09 bootstrap快速搭建前端的主要内容，如果未能解决你的问题，请参考以下文章

前端开发工具vscode如何快速生成代码片段

使用Bootstrap前端框架的栅格系统搭建页面布局

前端利器之Bootstrap

VS Code配置snippets代码片段快速生成html模板，提高前端编写效率

Bootstrap 使用

Bootstrap框架技术