bootstrap

   一。了解Bootstrap

        1.关于Bootstrap

            ①.诞生于2011年,来自Twitter公司,是目前最受欢迎的前端框架
            ②.是一个用于快速开发Web应用程序和网站的前端框架
            ③.Bootstrap是基于HTML、CSS、JS的,简洁灵活,使得Web开发更加快捷


            概述:Bootstrap是一个建立一个页面,就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架


        2.为什么学习Bootstrap

            ①.响应式设计(Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机)
            ②.移动设备优先
            ③.浏览器支持
            ④.容易上手


      3、在哪里可以用到Bootstrap

            企业网站、博客、网站后台之类的网站
            电商(电商网站分类太多)


  二、 环境安装

        ①.下载Bootstrap库
            https://v4.bootcss.com/
        ②.页面中引入库
            bootstrap.css:Bootstrap核心样式【添加到head标签中】
            jquery-3.3.1.js:jQuery库【注意:必须在Bootstrap核心库引入之前引入jQuery库】
            bootstrap.js:Bootstrap核心库
            【添加到</body>之前】
    案例
        案例1:查询按钮原生态实现对比Bootstrap方式实现

 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>对比原生态的button和Bootstrap的button区别</title>
        <link rel="stylesheet" href="./css/bootstrap.min.css" />
        <script src="js/bootstrap.min.js" type="text/javascript" charset="UTF-8"></script>
        <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="UTF-8"></script>
<style>    
        button{
            /* 手势 */
            cursor: pointer;
        }
</style>
    </head>
    <body>
        <button>原生态按钮</button>        
        <button class="btn btn-danger">首按钮</button>
        <button class="btn btn-default">二按钮</button>
        <button class="btn btn-info">三按钮</button>
        <button class="btn btn-warning">四按钮</button>
        <button class="btn btn-primary">五选项</button>
        <button class="btn btn-link">六按钮</button>
    </body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值