使用bootstrap完成网页布局

最新推荐文章于 2024-06-06 13:42:49 发布
最新推荐文章于 2024-06-06 13:42:49 发布
阅读量239 收藏
点赞数
文章标签： bootstrap 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qcsnssdn/article/details/131921830
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap-3.4.1-dist/css/bootstrap-theme.min.css" > 
    <link rel="stylesheet" href="../bootstrap-3.4.1-dist/css/bootstrap.min.css" > 
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #top{
            background-color: #fff;
            box-shadow: 0 2px 3px rgb(214, 214,214);
        }
        #top a{
            color: rgb(128,128,128);
        }
        .navbar-header img{
            width: 100px;
            height: 40px;
        }
        #lunbo img{
            width: 100%;
            height: 400px;
        }
        /* #right img{
            padding: 0 10px;
        } */
        #left,#right{
            height: 400px;
        }
        #left>img{
            height: 400px;
            width: 100%;
        }
        #right>div{
            height: 200px;
        }
        #footer{
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 顶部 -->
    <div class="container-fluid row" id="top">
        <div class="col-lg-6 text-center"><a href="#">dlwiadnlandlawd</a></div>
        <div class="col-lg-6 text-center"><a href="#">dwadadawdwadawdwa</a></div>
    </div>
    <!-- 导航 -->
    <div  class="container" >
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    
                    <!-- <a class="navbar-brand" href="#">Brand</a> -->
                    <img src="./tmlogo.png">
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <!-- <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> -->
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                                aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                                aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </div>
    <!-- 轮播 -->
    <div class="container" id="lunbo">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>
        
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="./bg111.PNG" alt="...">
                </div>
                <div class="item">
                    <img src="./bg222.PNG" alt="...">
                </div>
                <div class="item">
                    <img src="./bg333.PNG" alt="...">
                </div>
            </div>
        
            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <!-- 热门商品 -->
    <div class="container">
        <div id="top">
            <div class="col-md-3">热门商品</div>
            <div class="col-md-9">按照您的喜好</div>
        </div>
        <div class="row">
            <div class="col-md-3" id="left">
                <img src="./clo.PNG">
            </div>
        
            <div class="col-md-9" id="right">
                <div class="row" >
                        <img src="./nnn.PNG" alt="" class="col-lg-6 ">
                        <img src="./cb44.jpg" alt="" class="col-lg-3 ">
                        <img src="./fd4.jpg" alt="" class="col-lg-3 ">
                </div>
                <div class="row">
                        <img src="./ac2.jpg" alt="" class="col-lg-3 ">
                        <img src="./q2.jpg" alt="" class="col-lg-3 ">
                        <img src="./nnn.PNG" alt="" class="col-lg-6 ">
                </div>
            </div>
        </div>
    </div>
    <!-- 潮牌来袭 -->
    <div class="container">
        <div  class="container" id="footer" class="row">
            <h3 class="col-lg-12">潮牌来袭</h3>
        </div>

        <div class="row">
            <img src="./qqq067.jpg" alt="" class="col-lg-3 ">
            <img src="./cb44.jpg" alt="" class="col-lg-3 ">
            <img src="./fd4.jpg" alt="" class="col-lg-3 ">
            <img src="./qqq067.jpg" alt="" class="col-lg-3 ">
        </div>
        <div class="row">
            <img src="./qqq28ab.jpg" alt="" class="col-lg-3 ">
            <img src="./qqq6c35.jpg" alt="" class="col-lg-3 ">
            <img src="./qqqcd8.jpg" alt="" class="col-lg-3 ">
            <img src="./qqqdd12.jpg" alt="" class="col-lg-3 ">
        </div>
        <div class="row">
            <img src="./qqqdd55.jpg" alt="" class="col-lg-3 ">
            <img src="./qqq28ab.jpg" alt="" class="col-lg-3 ">
            <img src="./qqqdd12.jpg" alt="" class="col-lg-3 ">
            <img src="./qqq1.jpg" alt="" class="col-lg-3 ">
        </div>
        <div class="row">
            <img src="./qqq28ab.jpg" alt="" class="col-lg-3 ">
            <img src="./qqq6c35.jpg" alt="" class="col-lg-3 ">
            <img src="./qqqcd8.jpg" alt="" class="col-lg-3 ">
            <img src="./qqqdd12.jpg" alt="" class="col-lg-3 ">
        </div>
    </div>
    <script src="./js/jquery.js"></script>
    <script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>

 注意js引用的顺序，和js所在的文件位置。

qcsnssdn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用bootstrap布局网页
weixin_46295376的博客
02-16 516
Bootstrap 101 Template <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media...
bootstrap图片瀑布布局 Masonry插件
01-18
Bootstrap图片瀑布布局结合Masonry插件，是一种常用于创建视觉效果丰富的网页布局方式。这种方式能够使页面中的元素，特别是图片，以类似瀑布流的形式呈现，每一行的元素高度不一，形成错落有致的效果。在本文中，...
Bootstrap(首页整和&&实现登录、注册)
m0_68332494的博客
05-01 2738
首页整和以及实现登录、注册 案例1：首页轮播图实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例1：首页轮播图实现</title> <!-- 引入bootstrap样式 --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> .
自己动手搭网站（四）：用bootstrap写几个简单的页面
Tao_Shimmer的博客
03-27 1万+
目录前言一、bootstrap简介二、bootstrap环境准备2.1 下载bootstrap2.2 下载jQuery2.3 补充三、bootstrap搭建页面3.1 bootstrap引入项目bootstrap搭建简单页面 前言 这是博主自己动手搭建网站尝试过程的一些记录，上篇electerm远程连接云服务器，部署环境并发布第一个静态页面 自己动手搭建网站系列总目录 上篇写了连接云服务器，并发布一个静态页面，至此，所谓的“网站”总算有了点东西，然而，那确实就是一点东西…接下来的目标是把网站搭建得好看点并实
大学生bootstrap框架网页作业成品 bootstrap响应式网页制作模板 学生家乡网页bootstrap框架网站作品 html静态网页设计制作 dw静态网页成品模板素材网页
最新发布
网页设计与制作
06-06 991
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
采用bootstrap框架实现登录页面
qq_34884166的博客
12-20 1850
源码下载：微信小程序搜 “涨知识1024” ，搜索关键字“登录页”
用bootstrap框架做的一个博客首页
qinsangdilvzhi的博客
03-12 4156
@TOC 分为head body foot三个部分，其中head分上下两块，body分左右两块，foot分上下两块。 index.html &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta name
[前端]基于Bootstrap搭建登录页面，保姆级讲解，面面俱到~~~
热门推荐
qq_41604569的博客
04-05 2万+
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。在前端页面设计占有一定份额，今天手把手带你整除登录界面，最后的结果图如下： 页面要求 主要： 用户名 密码 同意单选框 登录按钮 修饰： 边框 阴影 开撸 1.新建一个login_demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>LoginDe
bootstrap第二章：bootstrap布局
qq_62244121的博客
10-17 3724
bootstrap布局详细介绍，附有网格列偏移和网格列嵌套
Bootstrap 实战之响应式个人博客 （一）
qq_40329976的博客
05-03 6673
一、示例 1、主页 2、博客详情页 3、在线地址 在线地址：入口 Addition：这里使用github-page将自己的静态项目免费部署到线上。 如果你只是做一些简单的静态项目做展示，付出这么大的时间和经济成本去专门购买一台云服务器显然是得不偿失的。github提供了github-page让用户可以免费部署自己的静态站点。更多参考：github-page 在本项目的静态站点部署时与其他的代码...
用bootstrap十分钟搭建你的博客首页
weixin_30466421的博客
12-14 638
第零章 效果图 第一章 引入文件 引入bootstrap的css文件、js文件和jQuery文件 <!-- 这里我是将bootstrap的css,fonts,js文件都放在目录下，且jQuery更名为jq后放在js的目录下 --> <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"&gt...
利用Bootstrap框架制作Bootstrap中文网首页（响应式布局）
Zhang_wang_yun的博客
04-05 5595
利用Bootstrap框架制作Bootstrap中文网首页（响应式布局）
bootstrap简易式操作布局页面实现
09-01
在"bootstrap简易式操作布局页面实现"这个主题中，我们将深入探讨如何利用Bootstrap的组件和网格系统创建一个简单易用的网页布局。 首先，Bootstrap的核心特性之一是其预定义的CSS样式、JavaScript插件和响应式网格...
基于BootStrap响应式布局的实现案例1-（基础版）
10-09
基于BootStrap响应式布局的实现案例1-（基础版） 每组中都有 3 张效果图，分别是一个响应式网页在大屏、中屏和小屏上的显示效果，要求按小组序号 对 7 取余加 1 指定的题号完成相应效果图的响应式网页，要求网页效果...
yii使用bootstrap分页样式的实例
10-20
不过，这要求在页面中已经引入了 Bootstrap 的 CSS 文件，通常在布局文件中完成。 此外，`CLinkPager` 的其他配置项如 `firstPageLabel`、`lastPageLabel`、`prevPageLabel` 和 `nextPageLabel` 分别定义了“首页”...
可爱宠物狗狗bootstrap网页模板
04-09
Bootstrap是一款广泛应用于网页设计的开源前端框架，由Twitter开发并维护。这个“可爱宠物狗狗Bootstrap网页模板”显然是专为创建与宠物，特别是狗狗相关的网站而设计的。在使用这个模板时，开发者可以快速构建出...
【前端布局篇】响应式布局 Bootstrap 移动端布局
前端知识分享喵
06-20 7436
布局:layout 对事物的全面规划和安排页面布局：对页面的文字、图形或表格进行格式设置。包括字体、字号、颜色纸张大小和方向以及页边距等。网页布局：利用html搭建结构与内容，使用CSS添加装饰网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。**注：**所有的页面布局都是基于盒子模型基础之上进行布置。响应式布局是 Ethan Marcotte 在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。
Bootstrap的行、列布局设计(网络-网格系统设计)
昊虹AI笔记
09-05 2952
Bootstrap的行、列布局设计(网络系统设计)
bootsrtap格栅系统(网页排版)
qq761358496的博客
12-03 76
bootsrtap格栅系统(网页排版)
使用Bootstrap完成自定义主题的网页，要求： 布局合理 样式统一 内容统一
05-24
好的，以下是一个简单的例子，使用Bootstrap完成自定义主题的网页。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap Custom Theme</title> <!-- 加载Bootstrap样式文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- 加载自定义样式文件 --> <link rel="stylesheet" href="custom.css"> </head> <body> <!-- 导航栏 --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">My Website</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> <!-- 主要内容区域 --> <div class="container mt-5"> <h1>Welcome to My Website</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> <p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.</p> </div> <!-- 页脚 --> <footer class="bg-dark text-white mt-5"> <div class="container py-3"> <p>© 2021 My Website. All rights reserved.</p> </div> </footer> <!-- 加载Bootstrap的JavaScript文件 --> <script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html> ``` 在上面的例子中，我们使用了Bootstrap提供的导航栏、容器和页脚等组件来构建网页的布局。同时，我们还使用了自定义样式文件`custom.css`来调整网页的样式，例如修改字体颜色、背景颜色等。 ```css /* 自定义样式 */ body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; } h1 { color: #007bff; } footer { padding: 20px 0; } ``` 在自定义样式文件中，我们通过修改`body`、`h1`和`footer`等元素的样式来实现样式的统一。此外，我们还可以通过使用Bootstrap提供的颜色变量和CSS类来进一步优化样式的统一。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值