我的第二个bootstrap响应式页面

最新推荐文章于 2023-11-13 17:48:53 发布
置顶 最新推荐文章于 2023-11-13 17:48:53 发布
阅读量477 收藏 2
点赞数 2
分类专栏： first 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43734973/article/details/84964347
版权

花了一天时间仿照完成，这个网站是很出名的bootCDN中文网，通观整个网页，其布局主要用到了，nav,jumbotron,list-group,最主要的就是container类,对于我来说，也还算是简单，现将代码发到博客供自己学习总结，如有侵犯，马上删除：
源网页链接：https://www.bootcdn.cn/
总结：
1.input框设置宽度并居中：将整个form-grop包裹在一个容器sreah-wraper中，并对齐样式进行设置：

.jumbotron .container .row .sreah-wraper {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
    margin-bottom: 20px;

html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	 <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- Bootstrap -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="style.css">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <!-- 导航栏 -->
	<nav class="navbar navbar-default">
		<div class="container">
			<div class="navbar-header">
				<a href="" class="navbar-brand">BootCDN</a>
                <button class="navbar-toggle" data-toggle="collapse" data-target=".collapse">
                    <span class="sr-only"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
			</div>
            <div class="collapse navbar-collapse navbar-right">
                <ul class="nav navbar-nav">
                    <li><a href="#">API</a></li>
                    <li><a href="#">博客</a></li>
                    <li><a href="#">关于</a></li>
                </ul>
            </div>
		</div>
	</nav>
    <!-- 超大屏幕 -->
    <div class="jumbotron text-center">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <h1>BootCDN</h1>
                    <p>稳定、快速、免费的前端开源项目 CDN 加速服务</p>
                    <p>共收录了<strong>3409</strong>个前端开源项目</p>
                    <div class="sreah-wraper" role="sreah">
                        <div class="form-group">
                            <div class="input-group">
                                <input type="text" class="form-control input-lg" placeholder="Searh">
                                <span class="input-group-btn">
                                    <button type="submit" class="btn btn-default btn-lg">
                                        <span class="glyphicon glyphicon-search"></span>
                                    </button>
                                </span>
                            </div>
                        </div>
                    </div> 
                </div>
            </div>   
        </div>
    </div>
    <!-- 图片列表 -->
    <div class="well text-center hidden-sm hidden-xs">
        <div class="container tupian">
            <div class="row">
                <div class="col-md-12">
                    <ul class="list-inline">
                        <li><a href="#"><img src="images/pic1.svg" alt=""></a></li>
                        <li><a href="#"><img src="images/pic2.svg" alt=""></a></li>
                        <li><a href="#"><img src="images/pic3.svg" alt=""></a></li>
                        <li><a href="#"><img src="images/pic4.svg" alt=""></a></li>
                        <li><a href="#"><img src="images/pic5.svg" alt=""></a></li>
                        <li><a href="#"><img src="images/pic6.svg" alt=""></a></li>
                        <li><a href="#"><img src="images/pic7.svg" alt=""></a></li>
                        <li><a href="#"><img src="images/pic8.svg" alt=""></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="container hidden-sm hidden-xs ">
        <a href="#" class="pull-right">拒绝流量劫持，全面使用HTTPS！</a>
        </div>
    </div>
    <!-- 一系列链接表 -->
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="list-group">
                    <a href="#" class="list-group-item">
                        <div class="row">
                            <div class="col-md-3 col-sm-12">
                                <h4>twitter-bootstrap</h4>
                            </div>
                            <div class="col-md-9 col-sm-12">
                                <p class="hidden-xs">Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                                <span class="glyphicon glyphicon-star">11111</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="list-group">
                    <a href="#" class="list-group-item">
                        <div class="row">
                            <div class="col-md-3 col-sm-12">
                                <h4>twitter-bootstrap</h4>
                            </div>
                            <div class="col-md-9 col-sm-12">
                                <p class="hidden-xs">Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                                <span class="glyphicon glyphicon-star">11111</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="list-group">
                    <a href="#" class="list-group-item">
                        <div class="row">
                            <div class="col-md-3 col-sm-12">
                                <h4>twitter-bootstrap</h4>
                            </div>
                            <div class="col-md-9 col-sm-12">
                                <p class="hidden-xs">Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                                <span class="glyphicon glyphicon-star">11111</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="list-group">
                    <a href="#" class="list-group-item">
                        <div class="row">
                            <div class="col-md-3 col-sm-12">
                                <h4>twitter-bootstrap</h4>
                            </div>
                            <div class="col-md-9 col-sm-12">
                                <p class="hidden-xs">Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                                <span class="glyphicon glyphicon-star">11111</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="list-group">
                    <a href="#" class="list-group-item">
                        <div class="row">
                            <div class="col-md-3 col-sm-12">
                                <h4>twitter-bootstrap</h4>
                            </div>
                            <div class="col-md-9 col-sm-12">
                                <p class="hidden-xs">Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                                <span class="glyphicon glyphicon-star">11111</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="list-group">
                    <a href="#" class="list-group-item">
                        <div class="row">
                            <div class="col-md-3 col-sm-12">
                                <h4>twitter-bootstrap</h4>
                            </div>
                            <div class="col-md-9 col-sm-12">
                                <p class="hidden-xs">Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                                <span class="glyphicon glyphicon-star">11111</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="list-group">
                    <a href="#" class="list-group-item">
                        <div class="row">
                            <div class="col-md-3 col-sm-12">
                                <h4>twitter-bootstrap</h4>
                            </div>
                            <div class="col-md-9 col-sm-12">
                                <p class="hidden-xs">Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                                <span class="glyphicon glyphicon-star">11111</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="list-group">
                    <a href="#" class="list-group-item text-center">获取开源项目...</a>
                </div>
            </div>
        </div>
    </div>
    <!-- footer -->
    <div class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-5 col-sm-12">
                    <h4>关于 BootCDN</h4>
                    <p>BootCDN 是 <a href=""> Bootstrap中文网</a>支持并维护的前端开源项目免费 CDN 服务，致力于为 Bootstrap、jQuery、Angular、Vuejs 一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。BootCDN 所收录的开源项目主要同步于 <a href="">cdnjs</a> 仓库。</p>
                    <p>自2013年10月31日上线以来已经为50多万家网站提供了稳定、可靠的免费 CDN 加速服务。</p>
                    <p>反馈或建议请发送邮件至：cdn@bootcss.com</p>
                </div>
                <div class="col-md-3 col-sm-12">
                    <h4>友情链接</h4>
                    <p>
                        <a href="#">Bootstrap中文网</a>
                        <a href="#">Ghost中国</a>
                    </p>
                    <p>
                        <a href="#">Laravel中文网</a>
                        <a href="#">jQuery中文文档</a>
                    </p>
                    <p>
                        <a href="#">Webpack中文网</a>
                        <a href="#">NPM中文网</a>
                    </p>
                    <p>
                        <a href="#">全栈课堂</a>
                        <a href="#">91PHP</a>
                        <a href="#">Node.js中文文档</a>
                    </p>
                </div>
                <div class="col-md-2 col-sm-12">
                    <h4>我们用到的技术</h4>
                    <ul class="list-unstyled list-inline">
                        <li><a href="#">Bootstrap</a></li>
                        <li><a href="#">Ghost</a></li>
                        <li><a href="#">jQuery</a></li>
                        <li><a href="#">Babeljs</a></li>
                        <li><a href="#">Lodash</a></li>
                        <li><a href="#">Node.js</a></li>
                        <li><a href="#">Grunt</a></li>
                        <li><a href="#">Gulp</a></li>
                        <li><a href="#">NPM</a></li>
                        <li><a href="#">webpack</a></li>
                        <li><a href="#">Rollup</a></li>
                        <li><a href="#">Parcel</a></li>
                        <li><a href="#">PostCSS</a></li>
                    </ul>
                </div>
                <div class="col-md-2 footer-last col-sm-12">
                    <h4>CDN赞助商</h4>
                    <a href="#">
                        <img src="images/pic9.svg"></immg>
                    </a>
                </div>
            </div>
        </div>
         <div class="footer-dibu well col-sm-12 col-sm-12 col-xs-12">
                <span>© 2013-2018 </span>
                <a href="#">京ICP备11008151号  </a>
                <span>京公网安备11010802014853</span>
            </div>
    </div>
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>

css代码如下：

body {
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.navbar {
	margin: 0;
	background: #27AE60;
	border: 0;
	box-shadow: none;
	border-radius: 0;
}
.navbar .container .navbar-header .navbar-brand {
	color: #FFFFFF;
}
.navbar .container .navbar-header .navbar-toggle {
	border-color: #27AE60;
}
.navbar .container .navbar-header .navbar-toggle .icon-bar {
	background: white;
}
.navbar .container .navbar-collapse .navbar-nav li a {
	color: #FFFFFF;
}
.navbar .container .navbar-collapse {
	border-color: #3BB56F;
}
.jumbotron {
	background: #27AE60;
	color: #FFFFFF;
	margin-bottom: 0;
}
.jumbotron .container .row .col-md-6 .form {
	margin-left: 30px;
}
.jumbotron .container .row .sreah-wraper {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
    margin-bottom: 20px;
}
.well {
	padding: 9px 9px 9px 9px;
}
.well .container .row .col-md-12 .list-inline {
	margin: 0;
}
.well .container .row .col-md-12 .list-inline li a img{
	width: 32px;
	margin-right: 38px;
}
.container .row .col-md-12 .list-group {
	margin-bottom: 0;
}
.container .row .col-md-12 .list-group .list-group-item {
	border-bottom: none;
	border-radius: 0;
}
 .footer{
	background: #27AE60;
	color: #FFFFFF;
}
.footer .row a {
	border-bottom: dotted 1px #a9dfbf;
	color: #FFFFFF;
	font-size: 14px;
	line-height: 1.42857143;
}
.footer .row .footer-last a {
	border-bottom: none;
}
.footer-dibu {
	margin: 0;
	text-align: center;
	background: #28A45C;
	border-color: #28A45C;
}
.footer-dibu a{
	color: #ffffff;
	border-bottom: dotted 1px #a9dfbf;
}

效果图如下：
在这里插入图片描述
在这里插入图片描述

前端小白菜小龙
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一套响应式的bootstrap产品展示页面模板 - Produkta
12-18
一套响应式的bootstrap产品展示页面模板 - Produkta,学习下载使用
使用Bootstrap设计响应式页面
weixin_33739541的博客
06-12 422
使用Bootstrap也非常简单,你只需要把下面的链接添加到你需要使用Bootstrap来进行布局的应用的头部： <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap /3.3.1/css/bootstrap.min.css"/> 通过Bootstrap使图片适配手机显示 <img class...
bootstrap实现响应式登录页面
08-28
bootstrap实现响应式登录页面
零基础Bootstrap入门教程(4)--开发标准的响应式网页
程序员大阳
02-18 2371
本文目录1. 背景2. 创建标准HTML5页面3. 添加响应式内容4. 小结 1. 背景 响应式网页指的是可以在不同尺寸/分辨率设备下都可以运行良好的网页，本篇就来讲解下如何使用Bootstrap构建符合标准规范的响应式网页。 2. 创建标准HTML5页面 首先创建一个标准的HTML5网页，代码如下： <!DOCTYPE html> <html> <head> <title>boostrap-responsive</title>
bootstrap响应式页面
HaoHao9898的博客
07-19 1008
　　响应式页面（Responsive web page）2010年提出，是可以智能的根据用户使用的设备来选择排版布局和样式的页面的，就是一套代码适用于多个设备，特点是不会出现横向的滚动条。响应式页面设计其实在实际的应用中并不是很广泛，一般具有一定规模的网站都会有移动端、PC端、pad端等几套代码，根据运行的设备来选择加载的代码。但是响应式页面也存在一定的作用，可以用作一些展示性的页面。 ...
Bootstrap禁用响应式布局的实现方法
08-31
响应式布局是Bootstrap的核心特性之一，它可以根据不同的屏幕尺寸和设备类型自动调整页面的布局，使得页面在不同的设备上都能良好地展现。然而，在某些情况下，开发者可能不想使用响应式布局，或者需要在特定的项目...
jQuery Bootstrap响应式购物商城模板
06-01
【jQuery Bootstrap响应式购物商城模板】是一个基于jQuery和Bootstrap框架构建的电商网站模板，它具有高度的响应式设计，能够适应各种屏幕尺寸的设备，包括桌面、平板和手机。这个模板是开发人员快速搭建功能丰富的...
第二章之Bootstrap 页面排版样式
10-22
Bootstrap，这个源自Twitter的前端框架，是Web开发中不可或缺的一部分，尤其在快速构建响应式和移动设备优先的网站时。其核心在于HTML、CSS和JavaScript的结合，提供了丰富的组件和工具，让开发者能够轻松地创建出...
《Bootstrap响应式Web开发》源代码.zip
07-03
7. **chapter02**：第二章可能是对Bootstrap框架的介绍，包括它的历史、核心理念和工作原理，以及如何快速入门，比如创建第一个Bootstrap页面。 通过这个压缩包，学习者将能够逐步掌握如何使用Bootstrap构建响应式...
响应式布局-BootStrap从基础到项目实战 - 第二季（高级篇）.zip
08-03
栅格系统是Bootstrap响应式布局的核心，通过一系列行（rows）和列（columns）的组合，帮助开发者创建灵活的页面结构。栅格系统通常由12列组成，可以灵活地进行嵌套和偏移，以适应各种屏幕尺寸。 接下来，你将学习...
bootstrap 响应式网页demo
01-09
bootstrap 响应式网页demo bootstrap 响应式网页demo源码 一共四个demo，可供参考
20分钟成功编写bootstrap响应式页面 就这么简单
11-23
最近发现一个叫 Bootstrap 的好东西，Bootstrap 是现在最流行的响应式 CSS 框架，它以移动设备优先，能够快速适应不同设备。使用它编写响应式页面快捷、方便，而且屏蔽了浏览器差异。使用了 Bootstrap 后，再也无法想象过去使用原始的 CSS 编写网页的悲惨生活了。 经过学习，我发现自己也具备了分分钟开发出一个高大上的页面的能力。本文将会为大家介绍 Bootstrap，并且带领大家一起实现一个响应式页面。 图 1. 移动优先，适应不同设备 一、安装 最简单的方式是直接在网页中引用内容分发网络（CDN）提供的 Bootstrap，当用户访问网页时，会从就近的服务器上获取资
20份经典bootstrap、响应式网页源码。没事可以练练，不错的
01-28
20份经典bootstrap、响应式网页源码。没事可以练练，不错的
bootstrap响应式网页后台管理系统模板
08-21
bootstrap响应式扁平化网页后台管理系统模板。可以做二次开发使用。网页精美，各种bootstrap插件齐全。
bootstrap响应式模板
12-05
总共包括两个利用bootstrap框架实战的简单模板，分别为海贼王主题的网站首页与论坛后台管理系统。页面为响应式布局，支持移动端，可供初学者借鉴参考，
bootstrap响应式网页
ruthy的博客
06-01 1641
相应式网页 什么是响应式网页？ 一个页面，可以在各种不同的设备下浏览，都有不错的浏览体验。 相应式网页的三个特征： 1.流式布局 2.可伸缩的图片可字体 3.CSS3 Media Query 如何编写响应式网页： 如何测试响应式网页： 1.使用真实物理设备---效果可靠但任务量太大 只要手机/平板/电脑在同一个局域网/互联网即可测试 2.使用第三方模拟器软件测试
基于Bootstrap的响应式网页
lollipop94的博客
10-22 7394
基于Bootstrap的响应式网页设计
CSS——响应式网页(Bootstrap)
qq_48613863的博客
04-11 7141
一套代码可以兼容不同的屏幕设备。响应式网页就是在大屏里看是一种布局，在小一点的屏幕看又是另一种布局，在更小的屏幕看又换了一种布局。如图所示： 一、媒体查询 作用：根据条件的不同，设置不同的css样式。 1、写法1 min-width（从小到大），max-width（从大到小） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta h
使用Bootstrap完成响应式页面设计
最新发布
m0_62676426的博客
11-13 2138
Bootstrap5是目前Bootstrap的最新版本，但考虑到浏览器的兼容性，建议使用 Bootstrap4 或 Bootstrap3。目前Bootstrap5 兼容所有主流浏览器（Chrome、Firefox、Edge、Safari 和 Opera），但不支持 IE11 及以下版本。在这篇文章中我使用的是Bootstrap4。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值