学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面

简介: 学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯,先赞后看哦~🎈🎈

Bootstrap

Bootstrap官网

1.Bootstrap介绍

一、什么是Bootstrap?

bootstrap是一个基于HTML、CSS和Javascript语言编写的框架,具有简单、灵活的特性,拥有样式库、组件和插件,bootstrap常用来开发响应式布局和移动设备优先的Web项目,能够帮助开发者快速搭建前端页面。

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

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

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

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

二、为什么要用Bootstrap

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

封装了常用的css样式,js动态效果。直接调用

使用bootstrap的宗旨就是 ctrl c / ctrl v

三、如何使用Bootstrap

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

2.页面中引入库

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

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

使用最新版

下载

并且提供CDN加速在线引入

解压后包含两个文件夹

不管是css,还是js,带min的都是压缩过的。生产中使用压缩过的


解压后,在项目中引入

2.简单使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    适配IE浏览器的edge浏览器
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   适配手机端,自适应手机屏幕大小,调整分辨率,方便手机观看 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap简单使用</title>
    <script src="jquery.js"></script>
    <!--    引入外部bootstrap样式-->
    <link rel="stylesheet" href="bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" />
</head>

没做手机屏幕适配之前,很小看不清

做了手机屏幕适配后,等比例缩放,但是这样缩放可能会导致页面显示不完内容。因此这就需要做响应式

我们不用设置任何样式,只需引入bootstrap自带的css样式即可

<body>
   <table class="table table-hover table-striped">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>孙坚</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>王涛</td>
                <td>男</td>
                <td>20</td>
            </tr>

            <tr>
                <td>王舒展</td>
                <td>女</td>
                <td>20</td>
            </tr>
            <tr>
                <td>刘亦菲</td>
                <td>女</td>
                <td>24</td>
            </tr>
        </tbody>
    </table>
</body>

浏览器显示效果

</html>
 

3.布局容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

        .c1{
            background-color:tan;
            height:100px;
        }
        .c2{
            background-color:pink;
            height:100px;
        }
        .c3{
            background-color:green;
            height:100px;
        }

    </style>
</head>
<body>
<!-- container-fluid占满整个屏幕 -->

<!-- container 左右两边有留白 -->

<div class="container-fluid">

    <div class="row">
<!--        //  col-md-offset-3  栅格偏移,向右偏移3个栅格的意思-->
<!--        //  col-md-6 占6个栅格,默认从左边开始-->
        <div class="col-md-6 c1 col-md-offset-3">
            <div class="row">
                <div class="col-md-6 c3"></div>
            </div>

        </div>
<!--        <div class="col-md-8 c2"></div>-->

    </div>


</div>
<!--<div class="container c1"></div>-->

栅格单位,铺满是12个栅格,各占6个

如果是占不满,留空白

如果两个加起来超过12个,则第二个换行

新版的栅格偏移,默认从左边开始,设置了栅格偏移可以从指定栅格开始

具体使用方法,可以参照官网使用说明,很详细

缩小屏幕等分,不会换行

</body>
<script src="jquery.js"></script>
</html>

4.Bootstrap实现轮播图

轮播图必须引入在bootstrap.js之前引入jQuery.js

设置轮播图轮换图片间隔时间,默认是5秒

还可以通过js方法控制轮播时间

轮播图完整代码:

<!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>轮播图</title>
    <script src="jquery.js"></script>
    <link rel="stylesheet" href="bootstrap-4.6.2-dist/css/bootstrap.min.css" />
    <script src="bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div
      id="carouselExampleCaptions"
      class="carousel slide"
      data-ride="carousel"
    >
      <ol class="carousel-indicators">
        <li
          data-target="#carouselExampleCaptions"
          data-slide-to="0"
          class="active"
        ></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="1.jpg" class="d-block w-100" alt="..." />
          <div class="carousel-caption d-none d-md-block">
            <h5>First slide label</h5>
            <p>Some representative placeholder content for the first slide.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="2.jpg" class="d-block w-100" alt="..." />
          <div class="carousel-caption d-none d-md-block">
            <h5>Second slide label</h5>
            <p>Some representative placeholder content for the second slide.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="3.jpg" class="d-block w-100" alt="..." />
          <div class="carousel-caption d-none d-md-block">
            <h5>Third slide label</h5>
            <p>Some representative placeholder content for the third slide.</p>
          </div>
        </div>
      </div>
      <button
        class="carousel-control-prev"
        type="button"
        data-target="#carouselExampleCaptions"
        data-slide="prev"
      >
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </button>
      <button
        class="carousel-control-next"
        type="button"
        data-target="#carouselExampleCaptions"
        data-slide="next"
      >
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </button>
    </div>
  </body>

  <script>
    $(".carousel").carousel({
      interval: 2000,
    });
  </script>
</html>

效果,图片轮换播放:


相关文章
|
12天前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
41 9
|
22天前
|
移动开发 开发者 HTML5
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
34 3
|
6天前
|
前端开发 JavaScript API
前端界的秘密武器:掌握这些框架,让你轻松秒杀99%的同行!
前端开发日新月异,掌握几个明星框架如React、Vue.js和Angular,不仅能让工作更得心应手,还能轻松超越同行。React以高效的虚拟DOM和组件化著称;Vue.js简洁易懂,灵活性高;Angular提供全面的解决方案,适合大型应用。此外,轻量级的Svelte也值得关注,其编译时处理设计提升了应用性能。掌握这些框架,结合深刻理解和灵活运用,助你在前端领域脱颖而出。
22 9
|
18天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
30 3
|
19天前
|
移动开发 数据可视化 前端开发
可视化设计web界面的工具
有什么可视化设计web界面的工具
30 0
|
22天前
|
前端开发 API
前端界面生成PDF并导出下载
【10月更文挑战第21天】利用合适的第三方库,你可以在前端轻松实现界面生成 PDF 并导出下载的功能,为用户提供更方便的文档分享和保存方式。你还可以根据具体的需求进一步优化和定制生成的 PDF 文件,以满足不同的业务场景要求。
|
24天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
19天前
|
消息中间件 监控 Kafka
Apache Kafka 成为处理实时数据流的关键组件。Kafka Manager 提供了一个简洁的 Web 界面
随着大数据技术的发展,Apache Kafka 成为处理实时数据流的关键组件。Kafka Manager 提供了一个简洁的 Web 界面,方便管理和监控 Kafka 集群。本文详细介绍了 Kafka Manager 的部署步骤和基本使用方法,包括配置文件的修改、启动命令、API 示例代码等,帮助你快速上手并有效管理 Kafka 集群。
40 0
|
1月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
101 3
|
17天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
105 45