使用bootstrap框架网页设计

最新推荐文章于 2024-09-08 23:43:26 发布
最新推荐文章于 2024-09-08 23:43:26 发布
阅读量190 收藏
点赞数 3
文章标签： bootstrap 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63634307/article/details/140739519
版权

"justify-content: flex-end" 表示横轴上将子元素放置到容器最后

"display: fixed"（固定定位）相对于窗口进行偏移定位

效果图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
    <link rel="stylesheet" href="./bootstrap-4.6.2-dist/css/bootstrap.css">
    <script src="./bootstrap-4.6.2-dist/js/jquery-3.4.1.js"></script>
    <script src="./bootstrap-4.6.2-dist/js/bootstrap.js"></script>
    <link rel="stylesheet/less" href="./index.less">
    <script src="https://cdn.jsdelivr.net/npm/less"></script>
</head>

<body>
    <div class="box">
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <img src="./images/logo.png" alt="">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
                aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse navbox" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">主页 <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">成员</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">巡演</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">联系</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
                            aria-expanded="false">
                            更多
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">单曲</a>
                            <a class="dropdown-item" href="#">专辑</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
        <!-- 轮播图 -->
        <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="./images/ych1.jpg" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>路</h5>
                        <p>尽头</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="./images/ych2.jpg" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>光</h5>
                        <p>闪耀</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="./images/ych3.jpg" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>武汉</h5>
                        <p>越听，越想走路回青春</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>
        <!-- 格栅系统 -->
        <div class="m">
            <div class="container">
                <div class="row">
                    <div class="row">
                        <div class="col-12 tit1">
                            我们的成员
                        </div>
                        <div class="col-12 tit2">
                            我们爱音乐
                        </div>
                        <div class="col-12 text">
                            XX乐队由一群热爱音乐的年轻人组成。成立两年来，已经成为校园炙手可热的新生代摇 滚团体。他们的音乐风格为流行朋克，旋律动听，节奏轻快。在经过场演出的磨练之后，XX凭借着阳
                            光健康的形象、充满活力的现场演出征服了许多年轻人，他们也已成为目前中国校园里最受欢迎的乐队。
                        </div>
                    </div>
                        <div class="col-lg-4">
                            <div class="title">Susan</div>
                            <div class="picture">
                                <img src="./images/member1.jpg" alt="">
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="title">Tom</div>
                            <div class="picture"><img src="./images/member2.jpg" alt=""></div>

                        </div>
                        <div class="col-lg-4">
                            <div class="title">Peter</div>
                            <div class="picture"><img src="./images/member3.jpg" alt=""></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

less代码

.box {
    nav {
        display: fixed;
        width: 100%;
        background-color: #020202bd !important;
        z-index: 2;

        img {
            width: 100px;
        }

        .navbox {
            ul {
                width: 100%;
                display: flex;
                //flex-end 表示横轴上将子元素放置到容器最后
                justify-content: flex-end;

                a {
                    color: #fff !important;

                }

                li {
                    :hover {
                        color: #000 !important;
                        background-color: #fff;
                    }

                    div {
                        background-color: #5b5b5db0 !important;
                    }
                }


            }
        }
    }

  
                  
}
        
.tit1 {
    text-align: center;
    font-size: 30px;
    margin-top: 50px;
    margin-bottom: 10px;
}

.tit2 {text-align: center;
    font-style: italic;
}

@media screen and(max-width:960px) {
    .text {
        display: none;
    }
}


.col-lg-4 {
text-align: center;

.title {
    margin: 10px 0;
    font-weight: 800;
}

img {
    border-radius: 50% !important;
}
}

m0_63634307
关注
Bootstrap 创建一个网页
lsx202406的博客
06-15 440
Bootstrap 是一个流行的前端框架，用于快速开发响应式和移动设备优先的网页。它由 Twitter 开发，并得到了世界各地开发者的广泛使用。Bootstrap 提供了一套丰富的预定义样式和组件，以及强大的 JavaScript 插件，使得网页开发变得更加快捷和简单。在本教程中，我们将学习如何使用 Bootstrap 创建一个基本的网页。
【Java 进阶篇】手把手教你创建 Bootstrap 旅游网站
繁依Fanyi的博客
10-22 575
上述示例提供了创建旅游网站的基本结构。现在，让我们进行一些自定义，以使您的网站更加吸引人。Bootstrap 提供了许多默认样式，但您可以轻松地自定义它们以适应您的品牌和设计需求。您可以通过编写自定义 CSS 来修改颜色、字体、边距等样式。以下是一个示例：< style > /* 修改导航栏背景颜色和文字颜色 */ .navbar {} /* 修改轮播图高度和文字样式 */ .carousel {} /* 修改按钮样式 */ .btn-primary {
学会Web UI框架--Bootstrap，快速搭建出漂亮的前端界面
景天科技苑
03-10 1万+
bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。 Bootstrap诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架。 是一个用于快速开发Web应用程序和网站的前端框架。 Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷。
Bootstrap 5.3版本创建常用页面
最新发布
强者征服今天，懦夫哀叹昨天，懒汉坐等明天。
09-08 758
你可以根据自己的主题需求来自定义样式。Bootstrap提供了丰富的CSS类和组件，使得创建响应式、移动优先的网站变得简单。下面我将指导你如何基于Bootstrap 5.3来编写一个简单但自定义主题的页面。以上是使用Bootstrap 5.3创建自定义主题页面的基本步骤。你可以根据自己的需求添加更多的内容和样式。
Bootstrap设计可响应式的移动网页
weixin_62190821的博客
10-07 2216
picture>标签包含标签和标签，根据不同设备屏幕的宽度，显示不同的图片。实现此效果主要是利用媒体查询技术中的 media 关键字，获取当前设备屏幕的宽度，根据不同的设备宽度，改变表格的样式，将表头有横向排列变成纵向排列。通过利用媒体查询技术中的media 关键字，获取当前设备屏幕的宽度，根据不同的设备将不重要的列设置为：display：none，从而隐藏指定的列。利用媒体查询技术中的 media 关键字，获取当前设备屏幕的宽度，根据不同的设备显示不同的 CSS样式。
使用bootstrap框架结合JavaScript进行网页设计-评论页资源
05-24
本资源包“使用bootstrap框架结合JavaScript进行网页设计-评论页资源”聚焦于如何运用这两种技术来创建一个功能完善的评论页面。 Bootstrap是由Twitter开发的一款开源的前端框架，它提供了一套完整的CSS样式和...
基于Bootstrap的网页设计实例
01-21
废话不多说了，直接给大家贴代码了，具体代码如下所示： <%@ page language=java contentType=text/html; charset=UTF-8 pageEncoding=UTF-8%> <!DOCTYPE html > ...meta name=viewport content=
Wepbage-Design-with-Bootstrap-Framework:使用Bootstrap框架创建的网页样本设计
05-16
Bootstrap框架是目前最流行和广泛使用的前端开发框架之一，它为开发者提供了丰富的工具和组件，以简化网页设计和开发过程。这个名为"Wepbage-Design-with-Bootstrap-Framework"的项目，显然旨在展示如何利用...
一份Bootstrap框架的期末作业
06-17
Bootstrap框架是目前最流行、最易用的前端开发框架之一，它由Twitter开发并开源，旨在简化网页设计和响应式布局的实现。这份"一份Bootstrap框架的期末作业"集合，显然是一个学习和实践Bootstrap的资源包，包含了作者...
超漂亮的bootstrap网站模板
02-16
超漂亮的bootstrap网站模板
WEB前端网页设计 Bootstrap 简介
君逍遥o
03-15 422
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
利用Bootstrap框架制作Bootstrap中文网首页（响应式布局）
Zhang_wang_yun的博客
04-05 5888
利用Bootstrap框架制作Bootstrap中文网首页（响应式布局）
基于Bootstrap设计网页
weixin_30892763的博客
03-01 2355
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="t...
使用bootstrap框架页面模板
m0_38089751的博客
11-09 1319
&amp;amp;amp;lt;!doctype html&amp;amp;amp;gt; &amp;amp;amp;lt;html lang=&amp;amp;quot;en&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;amp;amp;lt;!-- Required meta tags --&amp;amp;a
【Web应用开发】实验十：Bootstrap网页设计
msmxsd的博客
03-02 2273
文章目录一、实验目的二、实验内容三、实验效果四、小结 一、实验目的 • 学会利用Bootstrap中相关组件进行导航栏的设置 • 掌握Bootstrap中轮播图的设置方法 • 了解掌握Bootstrap中下拉菜单标签页和媒体对象等组件的使用 • 掌握Bootstrap中的栅格布局、列偏移和列排序的方法来设置网页样式 • 了解掌握Bootstrap中各种排版方式，对网页进行美化排版 二、实验内容 完成bootstrap和jquery的导入 导航栏及其背景颜色设置 设置导航栏为固定在上方 设置下拉提示
自己动手搭网站（四）：用bootstrap写几个简单的页面
Tao_Shimmer的博客
03-27 1万+
目录前言一、bootstrap简介二、bootstrap环境准备2.1 下载bootstrap2.2 下载jQuery2.3 补充三、bootstrap搭建页面3.1 bootstrap引入项目bootstrap搭建简单页面 前言 这是博主自己动手搭建网站尝试过程的一些记录，上篇electerm远程连接云服务器，部署环境并发布第一个静态页面 自己动手搭建网站系列总目录 上篇写了连接云服务器，并发布一个静态页面，至此，所谓的“网站”总算有了点东西，然而，那确实就是一点东西…接下来的目标是把网站搭建得好看点并实
最好懂的 Bootstrap 实战案例教程
热门推荐
LakeYC的博客
03-07 6万+
我们每期会根据不用的项目案例安排不同的技术栈免费课程！免费！免费！免费！来帮助大家提高，有兴趣的同学可以私信我哦~ 所有项目都是以真实项目为实战例。 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是
Bootstrap框架下的响应式网页设计与实现
"基于Bootstrap框架的响应式网页设计与实现" 本文主要探讨了如何利用Bootstrap框架进行响应式网页设计，以解决在不同移动设备上显示网页的兼容性问题，从而提供一致且友好的用户体验。Bootstrap作为一款流行的Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值