基于Bootstrap3的响应式布局网站_bootstrap3资源-CSDN文库

共6个文件

png：4个

css：1个

jsp：1个

Bootstrap

jquery

4星 · 超过85%的资源需积分: 22 193 浏览量 2015-05-17 19:12:26 上传评论 6 收藏 54KB 7Z 举报

Bootstrap3 是一个流行的前端开发框架，由Twitter推出，旨在简化网页设计和开发过程。它提供了丰富的预设样式、组件和JavaScript插件，使得创建响应式布局变得简单易行。响应式布局是现代网页设计的核心，它允许网站在不同设备（如手机、平板电脑和桌面电脑）上自动调整布局，提供最佳的用户体验。我们要理解Bootstrap3的基础结构。它基于12列的栅格系统，通过`.container`、`.container-fluid`类定义页面容器，以及`.row`类来划分行。栅格中的每个单元格（column）可以用`.col-*-*`类定义，其中`*`代表屏幕尺寸（xs, sm, md, lg），第二个`*`代表列数。例如，`.col-md-4`表示在中等屏幕尺寸下占据12列的三分之一。响应式设计主要通过媒体查询实现。Bootstrap3的CSS包含了针对不同设备屏幕宽度的媒体查询，当屏幕尺寸变化时，元素的显示方式会自动调整。例如，通过`.visible-xs`、`.visible-sm`等类可以控制元素在不同设备上的可见性。 jQuery是Bootstrap3中的关键组件，它是JavaScript库，提供了简洁的API来操作DOM元素，处理事件，执行动画等。在Bootstrap中，很多交互功能如模态框（modal）、下拉菜单（dropdown）、轮播图（carousel）等都依赖于jQuery。在本项目中，只有一个`index.jsp`页面，这意味着整个网站的结构和内容都在这个单一的文件中。JSP（JavaServer Pages）是一种动态网页技术，结合了HTML、CSS、JavaScript和Java代码。在这个JSP页面中，开发者可能使用了Bootstrap3的HTML类和jQuery脚本来实现响应式布局和交互效果。 `my`可能是项目的其他资源文件，如图片、CSS或JavaScript文件，但由于信息不全，我们无法详细讨论。在实际项目中，这些资源通常与`index.jsp`一起，用于增强页面的视觉效果和功能。学习和使用Bootstrap3，你需要掌握以下几个方面： 1. **栅格系统**：理解如何利用栅格创建灵活的布局。 2. **组件**：熟悉Bootstrap提供的各种预设组件，如导航条（navbar）、按钮（button）、表单（form）、卡片（card）等。 3. **响应式工具**：了解如何利用媒体查询和响应式类来适应不同设备。 4. **JavaScript插件**：知道如何激活和自定义Bootstrap的JavaScript插件，如模态框、滚动spy等。 5. **定制**：如果需要，学习如何自定义Bootstrap的主题和CSS，以符合特定的设计需求。基于Bootstrap3的响应式布局网站提供了一种快速构建美观且适应多设备的网站的方法。对于初学者来说，这是一个很好的起点，因为它提供了丰富的文档和示例，便于理解和实践。通过学习和应用这些知识，你可以创建出专业且用户友好的网页。

资源推荐

资源详情

资源评论

收起资源包目录

基于Bootstrap3的响应式网站.7z （6个子文件）

index.jsp 5KB

pic

3.png 13KB

1.png 14KB

2.png 13KB

avatar.png 12KB

css

mystyle.css 3KB

@CHARSET "UTF-8"; /* 顶部导航栏占了 50px，下移内容部分 */ body { padding-top: 50px; } /* 分割线 */ .sub-header { padding-bottom: 10px; border-bottom: 1px solid #e0e0e0; } /* 顶部导航栏，隐藏默认显示的1px边框 */ .navbar-fixed-top { border: 0; } /* 侧边栏中的头像背景设置为白色 */ .sidebar-offcanvas>p>a>img { background-color: #ffffff; } /* 侧边栏中的头像和名字居中 */ .centered { color: #ffffff; font-weight: bold; text-align: center; margin-bottom: 20px; } /* 侧边栏中的在线按钮 */ .online { width: 10px; height: 10px; background: #66DD00; margin-right: 5px; display: inline-block; } /* 侧边栏中的导航内容分组*/ .nav-sidebar { margin-bottom: 20px; } /* 侧边栏中的导航文字对齐*/ .nav-sidebar>li>a { color: #ffffff; padding-right: 20px; padding-left: 30px; } /* 侧边栏导航当前选中的的样式 */ .nav-sidebar>.active>a,.nav-sidebar>.active>a:hover,.nav-sidebar>.active>a:focus { color: #C80027; background-color: #ffffff; } /* 侧边栏导航划过的样式 */ .nav>li>a:hover { color: #C80027; background-color: #ffffff; } /* 主体内容 */ .main { padding: 20px; } /* 主体内容的页标题 */ .main .page-header { margin-top: 0; } /* 控制几张图片的距离与位置 */ .placeholders { margin-bottom: 30px; text-align: center; } .placeholders h4 { margin-bottom: 0; } .placeholder { margin-bottom: 40px; } .placeholder img { display: inline-block; } /* 设置默认字体为雅黑 */ body,button,input,select,textarea,h1,h2,h3,h4,h5,h6 { font-family: Microsoft YaHei, '宋体', Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; } /* 这里是当浏览器宽度最小不小于768px时应用的效果 */ @media ( min-width : 768px) { /* 侧边栏的样式 */ .sidebar-offcanvas { position: fixed; top: 50px; bottom: 0px; left: 0px; z-index: 1000; display: block; padding: 20px; overflow-x: hidden; overflow-y: auto; background-color: #C80027; border-right: 1px solid #ffffff; } /* 主体内容 */ .main { padding-right: 40px; padding-left: 40px; } } /* 这里是当浏览器宽度最大不超过767px时应用的效果 */ @media screen and (max-width: 767px) { /* 侧边栏弹出动画设置*/ .row-offcanvas { position: relative; -webkit-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; } .row-offcanvas-left { left: 0; } .row-offcanvas-left .sidebar-offcanvas { left: -50%; } .row-offcanvas-left.active { left: 50%; } /* 弹出的侧边栏设置 */ .sidebar-offcanvas { position: absolute; width: 50%; top: 0px; bottom: 0px; left: 0px; z-index: 1000; display: block; padding: 20px; overflow-x: hidden; overflow-y: auto; background-color: #C80027; border-right: 1px solid #ffffff; } /* 弹出按钮的样式 */ .offcanvas-nav-button { width: 30px; height: 30px; margin-right: 15px; background-color: #d80027; border: 1px solid #505050; border-radius: 50%; padding: 10px; } }

评论收藏

内容反馈