Bootstrap基本介绍

一、Bootstrap是什么

Bootstrap诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架

是一个用于快速开发Web应用程序和网站的前端框架

Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷

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

二、为什么要用Bootstrap

因为Bootstrap是一个简洁、直观、强悍的前端开发框架，让web开发更迅速、更容易上手。

三、如何使用Bootstrap

1.下载Bootstrap库 https://v4.bootcss.com/(Bootstrap管网)

2.页面中引入库

jquery-3.3.1.js：jQuery库【注意：必须在Bootstrap核心库引入之前引入jQuery库】

bootstrap.css：Bootstrap核心样式【添加到head标签中】

四，案例

查询按钮原生态实现对比Bootstrap方式实现

 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>案例1：查询按钮原生态实现对比Bootstrap方式实现</title>
        <style type="text/css">
            .aa{
                background-color: #007BFF;/* 背景颜色 */
                color: white;/* 字体颜色 */
                border:0px; /* 无边框*/
                width: 60PX;/* 宽度 */
                height: 40PX;/* 高度 */
                font-size: 1.125rem;/* 字体大小 */
                border-radius: 4px;/* 设置外边框圆角 */
            }
        </style>
        <!-- 引入Bootstrap的css(层叠样式) -->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        <!-- 支持手机端 -->
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>
    <body>
            <button class="aa">查询</button>
            <hr color="red">
            <button class="btn btn-danger">查询</button>
            <!-- 引入JQuery库 -->
            <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
            <!-- 引入Bootstrap的类库 -->
            <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

效果图

 


__EOF__

本文作者：小崽子&
本文链接：https://www.cnblogs.com/qizhiwei/p/17744710.html
关于博主：编程小萌新一名，希望从今天开始慢慢提高，一步步走向技术的高峰！
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   小崽子&  阅读(92)  评论(0)  编辑  收藏  举报
相关博文：
· SpringBoot
· Servlet
· Bootstrap概述和快速入门
· Bootstrap概述和Bootstrap快速入门
· Bootstrap_概述和Bootstrap_快速入门
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示