web前端:18_Bootstrap

1,bs网站(bs 响应式布局)

https://v3.bootcss.com/
https://v4.bootcss.com/
https://getbootstrap.net/

2,bs的基本模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        要使用BS,需要导入对应的文件(jq文件以及bs的css/js文件),再去官网找喜欢的代码
            导入顺序有要求:
            1,导入JQuery
            2,导入bootstrap的css文件
            3,导入bootstrap的js文件
     -->

     <!-- 1,导入JQuery -->
     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

     <!-- 2,导入bootstrap的css文件 -->dist/css/bootstrap-theme.min.css
     <link rel="stylesheet" href="dist/css/bootstrap-theme.min.css">
   
     <!-- 3,导入bootstrap的js文件 -->
     <script src="dist/js/bootstrap.min.js"></script>

</body>
</html>

3,bs的CV大法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <!-- https://v3.bootcss.com/css/#forms -->
    <form>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputFile">File input</label>
          <input type="file" id="exampleInputFile">
          <p class="help-block">Example block-level help text here.</p>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox"> Check me out
          </label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>


      <!--https://v3.bootcss.com/css/#images  -->
      <img src="img/05.jpg" alt="..." class="img-rounded">
    <img src="img/06.jpg" alt="..." class="img-circle">
    <img src="img/08.jpg" alt="..." class="img-thumbnail">  

</body>
</html>

4,ajax 同步 异步请求 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- ajax:
            同步请求 --同时执行,网页在加载数据时候,必须等待数据加载完才能做其他事情
            异步请求  --异步执行,网页在加载数据的时候,可以同时做其他事,边做边等
        
        ---ajax  就是一种前后端之间进行请求传输的方式
        前端从后端得到的是一个json的数据
    -->
    <img src="" alt="" id="pic">


    <!-- 1,js版本的请求 -->
    <!-- <script>
        // 声明一个实例对象  
        let ky = new XMLHttpRequest()  //基于xml给后端发生基于http协议的请求

        // 指定请求对象
        ky.open('GET','https://mp.csdn.net/mp_blog/creation/editor')  //向某个网站拿数据

        // 发送请求
        ky.send()
        let pic = document.getElementById('pic')

        // onload 读取事件,数据读取完毕后执行
        ky.onload = function(){
            let data = JSON.parse(ky.response)  //把拿到的数据以Json文件进行解析,给data
            pic.src = `${data.message}`

        }
    </script> -->

    <!-- 2,jq版本的ajax写法 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        $.ajax({
            // 请求地址
            url : 'https://getbootstrap.net/docs/getting-started/introduction/',
            // 请求方式
            method : 'get',
            success : function(msg){
                console.log(msg)
            },
            // 请求失败后,执行函数
            error(err){
                console.log(err)
            },
            // 返回的数据类型
            dataType : 'json'
        })
    </script>

</body>
</html>

学习建议

.学习建议
    编程之路是没有捷径的,想学好编程最简单的办法就是编程 --> 多写代码,多看博客.代码量上去了,经验业绩上去了.多交流.多拓展自己的眼界(少钻牛角尖)

    多看论坛:
        csdn  博客园  cxy521  掘金  菜鸟教程  LeetCode

    1.养成写笔记的习惯 --> 后续学完django后,可以搭建个人博客
    2.大学生有条件的话,多去参加比赛 --> 蓝桥杯 ACM CTF
    3.要对自己有个清晰的认知 --> 1.你想干嘛  2.你现在能干嘛 3.你还缺点啥 
    4.提升自己的竞争力:
        1.硬实力 -- IT专业技能相关的内容.  扎实的技术/学历/项目经验
        2.软实力 -- 文案/沟通/管理/比赛经验/证书
        3.加分项 -- 影视后期 / 自媒体

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值