一个用bootstrap写的小页面

最新推荐文章于 2023-08-15 23:12:23 发布
最新推荐文章于 2023-08-15 23:12:23 发布
阅读量260 收藏 1
点赞数
原文链接：http://www.cnblogs.com/timerainbow/p/4347184.html
版权 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="GB2312">
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.2-dist/css/bootstrap.css" rel="stylesheet" media="screen">
    <style>
        /* 导航条的默认高度是50px */
        body{
            padding-top: 50px;
        }
        /* 限制图片显示高度 */
        .carousel{
            height: 300px;
            background-color: #000000;
            margin-bottom: 60px;
        }
        .carousel .item{
            height: 300px;
            background-color: #000000;
        }
        /* 图片显示宽度百分之百 */
        .carousel img{
            width: 100%;
            }
        .carousel-caption p{
            margin-bottom: 20px;
            font-size: 20px;
            line-height: 1.8;
        }
        /* 是三栏布局居中对齐 */
        #summary-container .col-md-4{
            text-align: center;
            }

        #hr_css{
            margin: 40px 0;
        }
    </style>
</head>
<body>
<!--宝航条-->
<div class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
    <div class="navbar-inner container">
        <a class="navbar-brand" href="#">Title</a>
        <ul class="nav navbar-nav">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <!--下拉菜单-->
            <li class=""dropzone="">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a> </li>
                    <li><a href="#">Action</a> </li>
                    <li><a href="#">Action</a> </li>
                    <li class="divider"></li>
                    <li><a href="#">Action</a> </li>
                </ul>
            </li>
            <li><a href="#">Link</a></li>
        </ul>
    </div>
</div>
<!--滚动图片广告-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators"><!--轮播组件的导航（小圆点）-->
        <!--data-target="#myCarousel"当点击圆点时切换图片-->
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- Carousel items -->
    <div class="carousel-inner" role=""listbox><!--轮播组件的内容-->
        <div class="active item">
            <img src="bootstrap-3.3.2-dist/cat.jpg" alt="">
            <div class="carousel-caption">
                <h3>Chrome</h3>
                <p>Google Chrome,又称Google浏览器，是一个由Google公司开发的网页浏览器</p>
                <p>
                    <a class="btn btn-lg btn-primary" href="#">Download</a>
                </p>
            </div>
        </div>
        <div class="item">
            <img src="bootstrap-3.3.2-dist/bird1.jpg" alt="">
            <div class="carousel-caption">Picture2</div>
        </div>
        <div class="item">
            <img src="bootstrap-3.3.2-dist/bird2.jpg" alt="">
            <div class="carousel-caption">Picture3</div>
        </div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" role=button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control right" href="#myCarousel" role=button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<!--栅格系统/三栏布局-->
<div class="container" id="summary-container"><!--container固定宽度，container-fluid 100%-->
    <div class="row"><!--必须包含在container/container-fluid中-->
        <div class="col-md-4">
            <img class="img-circle" src="" alt="">
            <h3>Chrome</h3>
            <p>Google Chrome,又称Google浏览器，是一个由Google公司开发的网页浏览器</p>
            <p>
                <a class="btn btn-lg btn-primary" href="#">Download</a>
            </p>
        </div>
        <div class="col-md-4">
            <img class="img-circle" src="" alt="">
            <h3>Chrome</h3>
            <p>Google Chrome,又称Google浏览器，是一个由Google公司开发的网页浏览器</p>
            <p>
                <a class="btn btn-lg btn-primary" href="#">Download</a>
            </p>
        </div>
        <div class="col-md-4">
            <img class="img-circle" src="" alt="">
            <h3>Chrome</h3>
            <p>Google Chrome,又称Google浏览器，是一个由Google公司开发的网页浏览器</p>
            <p>
                <a class="btn btn-lg btn-primary" href="#">Download</a>
            </p>
        </div>
    </div>

    <hr>


    <!-- 标签页 -->
    <ul class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
        <li><a href="#message" role="tab" data-toggle="tab">Message</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="home">
            <div class="row">
                <div class="col-md-5">
                    <img class="img-circle" src="" alt="">
                </div>
                <div class="col-md-7">
                    <h3>Chrome</h3>
                    <p>Google Chrome,又称Google浏览器，是一个由Google公司开发的网页浏览器</p>
                    <p>
                        <a class="btn btn-lg btn-primary" href="#">Download</a>
                    </p>
                </div>
            </div>
        </div>

        <div class="tab-pane" id="message">
            <div class="row">
                <div class="col-md-5">
                    <img class="img-circle" src="" alt="">
                </div>
                <div class="col-md-7">
                    <h3>IE</h3>
                    <p>microsoft,又称microsoft浏览器，是一个由microsoft公司开发的网页浏览器</p>
                    <p>
                        <a class="btn btn-lg btn-primary" href="#">Download</a>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <hr>
    <footer>
        <p class="pull-right"><a href="#top">回到顶部</a></p>
        <p>版权所有</p>
    </footer>

</div>






<script src="jquery-2.1.3.js"></script>
<script src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
</body>
</html>

 

转载于:https://www.cnblogs.com/timerainbow/p/4347184.html

weixin_34111819
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrapdemo1:用bootstrap写的一个小页面
04-29
bootstrapdemo1用bootstrap写的一个小页面用到了导航插件 动画插件 wow.js
前端——bootstrap响应式网页制作-星游记主题（大作业+源码）
Pan_peter的博客
06-11 8286
【自制星游记续】十年后，我们再飞行！！！_哔哩哔哩_bilibili六一快乐，伙伴们。！！！！！！！！！！！！！！！！，相关视频：【自制星游记第28站】迷失的方向，最后的倒计时！，【自制星游记第27站】把彩虹海画下来，为自己而活，𝐓𝐌耗时𝟏𝟏𝟒𝟓𝟏𝟒秒修复的星游记《再飞行》，只为让你们带着梦想再次高高的飞起来啊！，纳米核心 第一季，2023，再等星游！，九年相识，三年等待！终将再一次响彻整个宇宙！，星游记，一部曾经有机会触碰那个天花板的作品。
[前端]基于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 创建简单的登陆界面
最新发布
m0_73384165的博客
08-15 2468
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。​Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
自己动手搭网站（四）：用bootstrap写几个简单的页面
Tao_Shimmer的博客
03-27 1万+
目录前言一、bootstrap简介二、bootstrap环境准备2.1 下载bootstrap2.2 下载jQuery2.3 补充三、bootstrap搭建页面3.1 bootstrap引入项目bootstrap搭建简单页面 前言 这是博主自己动手搭建网站尝试过程的一些记录，上篇electerm远程连接云服务器，部署环境并发布第一个静态页面 自己动手搭建网站系列总目录 上篇写了连接云服务器，并发布一个静态页面，至此，所谓的“网站”总算有了点东西，然而，那确实就是一点东西…接下来的目标是把网站搭建得好看点并实
用bootstrap写一个简洁的网页
ofsno的博客
10-23 1万+
在最近两周，我学习了bootstrap前端开发框架来快速制作一个网页，以往自己用html，css等学习的网页知识来写一个网页，往往需要挺长的时间。这次用bootstrap写的这个demo前后大概用了2天多，不得不承认，bootstrap框架真的是一款很好用的前端框架，它甚至可以让不懂设计的人员作出简洁的web网页。 简单的来介绍一下bootstrap。 1.它是一套简单灵活可用于架构
学做Bootstrap的第一个页面
09-02
主要为大家介绍了学做Bootstrap的第一个页面，这是学bootstrap的第一个页面，还有许多需要改进的地方，希望大家批评指正
bootstrap写的服装设计的静态页面
05-07
个人毕业设计用bootstrap框架写的，个人觉得还不错 个人毕业设计用bootstrap框架写的，个人觉得还不错 个人毕业设计用bootstrap框架写的，个人觉得还不错
基于Bootstrap开发的一个登录页面
05-18
基于Bootstrap开发的一个登录页面
基于bootstrap的一套页面
01-10
一套bootstrap的页面,可以直接拿来用,兼容性自然不用说了,肯定是兼容各个版本的,注意是一套
基于bootstrap的聊天页面设计
08-01
很实用的模板工具，基于bootstrap响应式界面设计
仿小米商城html网页源码
03-31
仿小米商城html网页源码，包括主页和详情页、购物页面，等等。内容非常丰富，适宜做学习商城网站前端页面参考，源码很棒，建议下载。
用Bootstrap写一个简单的静态网页
weixin_30721077的博客
08-14 3205
先说点题外话，如果想直接进入bootstrap正题请从第二段开始。周五面试一个小公司，给了我一个psd图让我用最快的时间还愿出这个静态页面，要求是能保证兼容性以及web响应式各种屏幕正常显示。周五晚上开始着手做到了凌晨，然后周六睡了一天的觉补回来，发现现在精力真不比大学毕业。周天放松了一天，炉石新版本巫妖王的骑士刚开，必须玩一下。TI7newbee输了。中国新歌声这届真的不行。中国有嘻哈到目前为止...
使用bootstrap写的简单页面
weixin_30553777的博客
06-04 783
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="bootstrap/di...
Bootstrap页面缩小布局改变的问题
weixin_42881147的博客
02-10 3650
Bootstrap作为一个广泛使用的前端框架，其核心响应式布局更是受到很多人喜爱，但在使用的同时，很多人被其页面缩小时会改变布局所困扰，下面我就向大家说说应该怎样解决这个问题（亲测完美解决）。 少扯淡，多干货！ ——————————————原代码—————————————— <style type="text/css"> header{ background-color:#d9534f...
js,jq点击打开小弹窗，当前页面弹出小窗口
三百两
01-19 1万+
function openWin(url) { var u = url; window.open(u, 'newwindow', 'height=600, width=800, top=30%,left=30%, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no'); } $(functio
bootstrap4 创建一个简单页面
biu的博客
03-29 5306
第一次尝试用前端框架写了一个简单页面。最重要的应该是先好好读一遍使用文档啊啊。先贴一波官方链接：http://www.bootcss.com/可以少走很多弯路_(:з」∠)_ 另外模板这个东西新手们打开看看也可以学到很多https://v4.bootcss.com/docs/4.0/examples/先贴一个预览图：页脚还有一点内容以下是html中的内容&lt;!DOCTYPE html&gt; ...
用bootstrap写一个博客页面
04-11
Bootstrap 的网格系统使用一个 12 列的网格，你可以使用它来将你的内容划分成不同的列，并调整每列的宽度。 例如，如果你想要在博客页面的左侧有一个侧边栏，并在右侧显示博客的主要内容，你可以使用以下 HTML ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值