Bootstrap(前端框架)&环境安装-CFANZ编程社区

Bootstrap(前端框架)&环境安装

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

响应式设计（Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机

Bootstrap4中文文档-->下载Bootstrap——>下载bootstrap源码（下载后解压）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例1:查询按钮原生态实现对比Bootstrap方式实现</title>
    <style>
        .aa{background-color: #0076FF;/*背景颜色*/
            color:white;/*字体颜色*/
            border: 0px;/*去边框*/
            width: 50px;/*宽度*/
            height: 30px;/*高度*/
            border-radius: 5px;/*倒角*/
        }
    </style>
    <!-- 引入Bootstrap的css(样式) -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <!-- 支持手机端 -->
    <meta name="viewport" content="width=device-width,initial-scale,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
</head>
<body>
    <!-- 固定容器 -->
    <div class="container">
        <button class="aa">查询</button>
        <hr color="red">
        <!-- Bootstrap的按钮 -->
        <button class="btn btn-outline-primary">搜索</button>
    </div>
    <!-- 先引入jQuery的类库 -->
    <script src="js/jquery-3.3.1.js"></script>
    <!-- 引入Bootstrap的类库 -->
    <script src="js/bootstrap.js"></script>
</body>
</html>

代码效果

0 条评论