bootstrap搭建页面案例

最新推荐文章于 2024-06-10 21:17:33 发布
最新推荐文章于 2024-06-10 21:17:33 发布
阅读量2.7k 收藏 7
点赞数 3
分类专栏： 类库框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjsfdx/article/details/79318630
版权

文件目录
这里写图片描述
index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="./bootstrap.min.css" rel="stylesheet">
    <link href="app.css" rel="stylesheet" />
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="side-nav" role="navigation">
        <ul class="nav-side-nav">
            <li><a class="tooltip-side-nav" href="#onepage"></a></li>
            <li><a class="tooltip-side-nav" href="#twopage"></a></li>
            <li><a class="tooltip-side-nav" href="#threepage"></a></li>
            <li><a class="tooltip-side-nav" href="#fourpage"></a></li>
            <li><a class="tooltip-side-nav" href="#five"></a></li>
        </ul>
    </div>
    <div class="onepage" id="onepage">
        <div class="onepage-bg" id="onepagebg"></div>
        <div class="container">
            <div class="row">
                <div class="title-text">
                    <div class="col-md-12 headfontsize">
                        <h1 class="headh1content">
                            *****<br /> 在这里你可以学习
                            <br /> 到你想要的
                        </h1>
                        <p style="margin-top:50px;line-height:33px;">只要你有耐心，相信程序对你而言，小菜一碟，你一定是可以顺利拿下的</p>
                        <p class="btn-app-store">
                            <a class="btn btn-success btn-lg" href="#">立即注册，开始学习</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="twopage" id="twopage">
        <div class="twopage-text">
            <h1 class="twopage-text-h1">
                选择你的第一节课程进行学习<img src="images/Androidicon.png" />
            </h1>
        </div>
        <div class="row">
            <div class="twopage-courses col-md-4">
                <a href="#">
                    <img src="images/2d.jpg" style="width:100%" />
                    <div class="classicon">
                        <h3>认真学习哦</h3>
                        <h1><strong>学习这个课程</strong></h1>
                    </div>
                </a>
            </div>
            <div class="twopage-courses col-md-4">
                <a href="#">
                    <img src="images/screct.jpg" style="width:100%" />
                    <div class="classicon">
                        <h3>认真学习哦</h3>
                        <h1><strong>学习这个课程</strong></h1>
                    </div>
                </a>
            </div>
            <div class="twopage-courses col-md-4">
                <a href="#">
                    <img src="images/2048.jpg" style="width:100%" />
                    <div class="classicon">
                        <h3>认真学习哦</h3>
                        <h1><strong>学习这个课程</strong></h1>
                    </div>
                </a>
            </div>
        </div>
        <div class="twopagebtn">
            <a id="twopage-easy" href="#" class="btn btn-success btn-lg">如果你想学习，快快点击这里</a>
        </div>
    </div>
    <div class="threepage" id="threepage">
        <div class="threepage-bg" id="threepagebg">
            <div class="threepagecontent">
                <div class="threepagetext">
                    <h1>为什么要学习编程思想</h1>
                    <p>只要你有耐心，相信程序对你而言，小菜一碟！</p>
                </div>
                <a href="#" class="btn btn-success btn-lg threepagebtncontent">快速注册，要干活了</a>
            </div>
        </div>
    </div>
    <div class="fourpage" id="fourpage">
        <div class="container" style="width:70%">
            <div class="coursexingqing-text">
                <h1>要干活，必须要工具到位</h1>
                <p>怎么才能做到最快速的学习呢，你猜么？</p>
            </div>
            <div id="carousel-example-generic" class="carousel slide" data-interval="5000" style="height:300px">
                <ol class="carousel-indicators" style="margin-top:200px">
                    <li data-target="#carousel-example-generic" data-slide="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide="1" class=""></li>
                    <li data-target="#carousel-example-generic" data-slide="2" class=""></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active" style="width:500px">
                        <img src="images/four-2-1.png" />
                    </div>
                    <div class="item" style="width:500px">
                        <img src="images/four-2-1.png" />
                    </div>
                    <div class="item" style="width:500px">
                        <img src="images/four-2-1.png" />
                    </div>
                </div>
                <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>
    </div>
    <div class="fivepage" id="five">
        <div class="fivepage-bg" id="fivepage">
            <div class="container">
                <div class="footertext">
                    <h1>你还在等待呢。赶快动手吧</h1>
                </div>
                <div class="footerbtncenter">
                    <div class="row">
                        <a href="#">
                            <div class="col-md-4">
                                <img src="images/tuling.jpg" class="footerbtn queyeicon" />
                            </div>
                        </a>
                        <a href="#">
                            <div class="col-md-4">
                                <img src="images/tuling.jpg" class="footerbtn queyeicon" />
                            </div>
                        </a>
                        <a href="#">
                            <div class="col-md-4">
                                <img src="images/tuling.jpg" class="footerbtn queyeicon" />
                            </div>
                        </a>
                    </div>
                </div>
                <div class="footertextbtn">
                    <button type="button" class="btn btn-success btn-lg" style="font-size:25px;">你还在看？在看？再看我吃了你</button>
                </div>
                <p class="footertextbtn-text">
                    只要你有耐心，相信程序对你而言，就是小菜一碟！
                </p>
            </div>
        </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="./bootstrap.min.js"></script>
</body>

</html>

app.css

h1,h3,p,a,button{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.side-nav{
    position: fixed;
    top: 45%;
    right: 20px;
    z-index: 1;
}

.side-nav ul.nav-side-nav{
    text-align: center;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.side-nav ul.nav-side-nav > li > a{
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #e2e2e2;
}

.side-nav ul.nav-side-nav > li{
    display: block;
    line-height: 1.45em;
    margin: 0;
    padding: 8px 0;
}

.onepage{
    height: 750px;
}

.onepage-bg{
    height: 800px;
    width: 100%;
    position: absolute;
    background-position: center center;
    background-size: cover;
}

#onepagebg{
    background-image:url("images/topicon.jpg");
}

.headh1content{
    margin-top: 150px;
    line-height: 75px;
}

.title-text{
    margin-left: 50px;
}

.headfontsize h1{
    font-size: 50pt;
    color: #fff;
}

.headfontsize p{
    color: #fff;
}

.twopage{
    padding: 2px 0 0 2px;
    height: auto;
    position: relative;
}

.twopage-text{
    width: 100%;
    text-align: center;
}

.twopage-text-h1{
    margin-left: 120px;
    letter-spacing: 2px;
    margin-top: 80px;
    margin-bottom: 0;
    padding: 20px 0 0 0;
}

.twopage-text-h1 img{
    width: 120px;
    margin-top: -20px;
}

.twopage .row{
    margin-right: 0;
    margin-left: 0;
}

.twopage-courses{
    float: left;
    background: #fff;
    padding: 0 2px 2px 0;
    position: relative;
    overflow: hidden;
}

.twopage-courses > a{
    width: 100%;
    height: 100%;
    float: left;
    text-align: center;
    position: relative;
}

.classicon h3{
    margin-top: 120px;
    color: #d1e973;
}

.classicon h1{
    color: #fff5e1;
}

.classicon{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    opacity: 0;
}

.classicon:hover{
    background: #1eb450;
    opacity: 0.9;
    -webkit-transition:opacity 0.5s;
    transition: opacity 0.5s;
}

.twopagebtn{
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.twopagebtn .btn-lg{
    font-size: 25px;
}

#twopage-easy{
    margin: 50px 0;
    margin-bottom: 100px;
}

.threepage{
    position: absolute;
    width: 100%;
    height: 800px;
}
.threepage-bg{
    position: absolute;
    height: 100%;
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

#threepagebg{
    background-image:url("images/three.jpg");
}
.threepagecontent{
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.threepagetext{
    margin-top: 100px;
    color: #fff;
}

.threepagetext p{
    margin-top: 20px;
    font-size: 20px;
    line-height: 32px;
}

.threepagebtncontent{
    margin-top: 450px;
    font-size: 25px;
}

.fourpage{
    height: 700px;
    background: url("images/four.jpg");
     margin-top: 800px;
}

.coursexingqing-text{
    color: #fff;
    margin-top: 100px;
    width: 100%;
    text-align: center;
}

.coursexingqing-text p{
    margin-top: 25px;
    font-size: 20px;
}

.fourpage .container .carousel{
    margin-top: 30px;
}

.carousel-control.left {
    background-image: -webkit-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
    background-image: -o-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,0)),to(rgba(0,0,0,0)));
    background-image: linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
    background-repeat: repeat-x;
}

.carousel-control.right {
    right: 0;
    left: auto;
    background-image: -webkit-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
    background-image: -o-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,0)),to(rgba(0,0,0,0)));
    background-image: linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
    background-repeat: repeat-x;
}

.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
    left: -20%;
    /*margin-left: -10px;*/
}

.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
    right: -20%;
    /*margin-right: -10px;*/
}

.fivepage-bg{
    height: 800px;
    width: 100%;
    position: absolute;
    background-position: center center;
    background-size: cover;
}

#fivepage{
    background-image:url("images/five.jpg");
}

.footertext{
    margin-top: 55px;
    width: 100%;
    color: #fff;
    font-size: 20px;
    text-align: center;
}

.footerbtncenter{
    margin-top: 100px;
    text-align: center;
}

.queyeicon{
    width: 200px;
}

.queyeicon:hover{
    border: 2px solid #d9edf7;
}

.footertextbtn{
    margin-top: 150px;
    width: 100%;
    text-align: center;
}

.footertextbtn-text{
    margin-top: 20px;
    color: #000;
    text-align: center;
}

这里写图片描述

UIEngineer
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
项目案例介绍bootstrap模板
04-09
总的来说，"项目案例介绍bootstrap模板"为开发者提供了一个便捷的起点，帮助他们快速搭建功能齐全、美观的网站。掌握Bootstrap的使用，不仅可以提高开发效率，也能提升项目的质量和专业度。在实践中不断探索和学习...
bootstrap实用案例3.rar
04-15
它是开始新项目的起点，开发者可以根据这个模板快速搭建一个符合Bootstrap规范的页面。 5. **css**：这个目录可能包含自定义的CSS样式，开发者可能在此修改或扩展Bootstrap的默认样式，以满足特定项目的需求。...
黑马程序员----基于BootStrap框架的网页制作综合案例
m0_53157173的博客
06-20 3242
网页制作综合案例完整源码:效果演示: 完整源码: <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scal
简洁单页bootstrap作品展示模板
06-05
简洁 作品 展示 bootstrap 响应式 手机 案例 黑色 单页 lightbox fixed 简单
大学生bootstrap框架网页作业成品 web前端大作业期末源码 航海王html+jquery+bootstrap响应式网页制作模板 学生海贼王动漫bootstrap框架网站作品 (3)
最新发布
dreamweaver网页设计
06-10 539
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】 文章目录🌰一、网页介绍📖一、网页效果🌌二、代码展示😈1.HTML代码结构 🧱2.CSS样式代码 🏠三、个人总结😊四、更多干货🚀
基于ThinkPHP+Bootstrap在线购物商城网站设计带推荐-计算机毕业源码设计
计算机源码设计案例的博客
12-19 697
本项目是一个基于php开发语言和thinkphp框架开发的购物网站项目，一共有2个身份包括用户和管理员。用户在前台可以注册账号和登录，登录后可以分类查看商品信息，也可以按照商品关键词查询商品，查看自己感兴趣的商品详情和加入购物车，也可以直接购买下单，用户可以查询管理自己的订单记录，可以修改个人信息；管理员登录后可以管理商品分类信息，发布新商品和管理现有的商品信息，可以把不要的商品收入回收站，也可以对回收站商品还原，可以管理注册会员信息，查询管理用户订单包括处理订单发货等。
基于BootStrap实现商城首页
qq_44116526的博客
11-24 1523
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>书城首页</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https
Bootstrap(新书上架&书籍列表&轮播图)
Bugxiu_fu的博客
05-16 288
轮播图，新书上架，书籍列表实现
bootstrap实现的自适应页面简单应用示例
08-31
Bootstrap实现的自适应页面简单应用示例 在本文中，我们将详细介绍Bootstrap实现的自适应页面简单应用示例，结合具体实例形式分析了基于Bootstrap的列表布局结构页面实现与使用技巧。 首先，让我们了解什么是...
bootstrap经典实用案例
11-05
在描述中提到的“框架搭建”，是指如何设置和配置Bootstrap环境，通常包括下载或链接到Bootstrap的CSS和JS文件，以及可选的jQuery库，因为大部分Bootstrap的交互功能依赖于jQuery。 1. **栅格系统**：Bootstrap的...
多平台bootstrap案例展示模板
04-02
这个“多平台Bootstrap案例展示模板”集合了多种适用于不同设备和平台的设计模式，旨在帮助开发者快速搭建用户界面，提升网站的用户体验。 Bootstrap的核心特性包括一套响应式网格系统、预定义的CSS样式、...
让你快速搭建一个bootstrap页面
10-20
个人整理的一个万能的bootstrap模板，让你快速搭建一个bootstrap页面，兼容Ie8,ie8以下要在服务器上才能看的出来效果哦，你可以自己在本地搭建一个服务器如iis
bootstrap案例35个常用案例
01-15
收集了35个实用的bootstrap案例，轮播，表单设计等
bootstrap基本显示页面
zhuanzhishehuizhe的博客
07-21 586
//包括基本的页面显示 //还有一些常用的增删改查 <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h1>员工信息管理</h1> </div> </div> <div class="row">
bootstrap搭建一个简单的官网案例附代码
.
01-10 1182
bootstrap搭建一个简单的官网案例附代码
Bootstrap实战 - 瀑布流布局
后除
12-05 3729
讲 Bootstrap 基础的教程网上已经很多了，实际上 Bootstrap 中文网（bootcss.com）里的文档已经写的很详细了，但实战的案例却不多。这里用一些当前流行的网页布局为导向，使用 Bootstrap 中的样式来完成它。每次只讲与案例相关的知识点，边学边练，加强理解。
前端使用 BootStrap 写一些后台常用的界面
热门推荐
IT小村
02-27 2万+
一、前言 1、作为一个专注后台方向上的学习者，肯定不只是简单地处理业务逻辑而已 2、自己独立完成一个作品，一般都要涉及到几个界面的编写： ①登录界面 ②CRUD界面 ③主页 ④… 3、UI方面的简单的框架有很多，使用的过程也是深有感触： ①之前先是使用 EasyUI ，后来逐渐觉得其写出来的界面如明日黄花，简陋不已，写出来的界面都不好意思说是自己写的。 ②于是接着选择了最新最热门...
2018千锋HTML5视频教程全集学习知识点精选：Bootstrap框架技术
码农王也的博客
12-15 1778
2018千锋HTML5视频教程全集学习知识点精选：Bootstrap框架技术。Bootstrap 是基于 Less 打造的，并且也有 Sass版本。Less/Sass是CSS的预处理技术，正因如此，它一经推出就包含了一个非常实用的 Mixin 库供我们调用，使得我们在开发过程中对CSS的处理更加简单。
科技网站制作案例教程-全.docx
11-20
在项目框架搭建阶段，教程详细指导了如何使用命令行进行工程创建、应用创建和静态文件夹的设置。通过`django-admin startproject`命令创建主工程，接着通过`django-admin startapp`为每个功能模块创建单独的应用，如...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值