使用bootstrap做一个响应式的页面

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,…

在cnblogs,一直都是使用官方自带的那些模板,而且感觉也一直很良好!不过最近用手机搜索一些相关的技术资料,很多都来自cnblogs,有些博主的页面在和机端显得很好,有些则展示得不那么友好了……忽然想起了cnblogs可以完全自定义CSS,早上起来就开始整了.由于我一直都喜欢干净整洁且清晰的页面,能不用图就不用.这次干脆偷了个懒,一张图都没用上…… 先把最终效果截出来: 情况一:屏幕宽度大于960px时,左侧自动伸缩,右侧固定320px 情况二:屏幕大于在768px,小于960px时,右侧缩小…

“Bootstrap做的响应式菜单在iPhone上点击不了二级菜单“的解决办法！

只需把把点击的a(被点击的)变成button即可.…

带你玩转JavaWeb开发之五-如何完成响应式开发页面

响应式页面开发使用BootStrap开发一个响应式的页面出来响应式开发就是同一个页面在PC端与手机端Pad端显示不同的效果,以给用户更好的体验需求分析开发一套页面,让用户能够在PC端, Pad端, 手机端同时正常显示啊,并且不能够影响显示效果技术分析 BootStap概述什么是BootStrap BootStrap有什么作用什么是响应式 BootStrap的中文网 http://www.bootcss.com 下载BootStrap BootStrap结构全局CSS bootSt…

bootstrap响应式前端页面

技术:HTML+CSS+JS+bootstrap 概述这套代码响应式前端页面基本写完了,适合初学前端的同学,里面主要运用了HTML+CSS布局和动画,js逻辑较少,页面都是静态,未接入接口.响应式借助的是bootstrap这个库. 详细代码下载:http://www.demodashi.com/demo/14991.html bootstrap响应式学习参考源码,代码主要是通过bootstrap实现了响应式布局,简单易懂. 一.项目目录二.演示效果三.程序实现具体步骤首页代码 in…

Bootstrap 实战之响应式个人博客（二）

阅读本博文前请参考:Bootstrap 实战之响应式个人博客 (一) 一.博客 1.结构整体博客详情页的结构共包括四部分: 导航栏博客主体内容右侧栏:全局搜索框,广告位,推荐阅读页尾其中导航栏,右侧栏,页尾都是可以复用博客列表页(index.html)的元素以及样式表的,需要补充的只有博客主体内容了,所有工作量大大减少了. 2.简介博客主页应该有一个对博客主体内容的简介,还有直观的就是技术标签,比如Java,Python或者Bootstrap这些技术相关,可以用一个醒目的lable元…

Bootstrap 实战之响应式个人博客（一）

一.示例 1.主页 2.博客详情页 3.在线地址在线地址:入口 Addition:这里使用github-page将自己的静态项目免费部署到线上. 如果你只是做一些简单的静态项目做展示,付出这么大的时间和经济成本去专门购买一台云服务器显然是得不偿失的.github提供了github-page让用户可以免费部署自己的静态站点.更多参考:github-page 在本项目的静态站点部署时与其他的代码仓库,提交同步没有太大的区别(言外之意:还是有点不同的): 第一点:需要将项目目录名设置为 "githu…

使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版

通常把一些重要信息.需要重点标注的信息放在轮播的下方显示,这部分区域用到了大字体的标题.副标题以及段落文字等. <div class="row" id="bigCallout"> <div class="col-md-12"> <div class="well"> <div class="page-header"> <h1>梅西升腾小宇宙<s…

使用media Queries实现一个响应式的菜单

Media queries是CSS3引入的一个特性,使用它可以方便的实现各种响应式效果.在这个示例中我们将会使用media queries实现一个响应式的菜单.这个菜单会根据当前浏览器屏幕的大小变化而自动的呈现出不同的样式.如果浏览器屏幕大于800px,菜单则会显示在页面左侧:如果浏览器屏幕介于401px到800px之间,菜单则会显示在页面上方,与其他内容是上下关系:如果屏幕小于400px,则菜单仍在页面上方,但是菜单会变为下拉列表形式. 预览地址: http://htmlpreview.git…

一个响应式框架——agera

Google在上周开源了一个响应式框架——agera,相信它会慢慢地被广大程序员所熟知.我个人对这样的技术是很感兴趣的,在这之前也研究过RxJava,所以在得知Google开源了这样的框架之后第一时间进行了学习,这里算是把学习的心得和大家分享.当然由于本人水平有限,这篇文章可能起的更多的作用是抛砖引玉,希望有更多的大神能加入到学习agera的大部队中,争取早日出现几篇让人信服的文章! 通过这篇文章你可能会学习到: 1.agera是什么,也就是它的基本概念和大体框架. 2.agera的基础用法.…

media Queries实现一个响应式的菜单

使用media Queries实现一个响应式的菜单 Media queries是CSS3引入的一个特性,使用它可以方便的实现各种响应式效果.在这个示例中我们将会使用media queries实现一个响应式的菜单.这个菜单会根据当前浏览器屏幕的大小变化而自动的呈现出不同的样式.如果浏览器屏幕大于800px,菜单则会显示在页面左侧:如果浏览器屏幕介于401px到800px之间,菜单则会显示在页面上方,与其他内容是上下关系:如果屏幕小于400px,则菜单仍在页面上方,但是菜单会变为下拉列表形式.…

使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容

□ ListGroup展示内容当希望把同类型的内容以列表.区块展示的时候,ListGroup是不错的选择. <div class="col-sm-6"> <h3>马云为恒大生死战开出男人奖 </h3> <p> 8月27日晚,广州恒大将迎来亚冠联赛生死战,主场迎战西悉尼流浪者队,由于一周之前已经在客场0-1负于对手,本场比赛恒大队必须置死地而后生在主场净胜对手两球.就在今天中午,前不久入主恒大的阿里巴巴老板马云来到球队,在鼓励球员的同时开…

使用Bootstrap 3开发响应式网站实践05,使用Tab、Modal、Form展示内容,使用Popover、Tooltip展示提示信息

本篇体验用Tab插件显示内容.Html部分为: <div class="row" id="moreInfo"> <div class="col-sm-6"> <h3>兰帕德宣布退出英格兰队</h3> <div class="tabbable"> <ul class="nav nav-tabs"> <li class="a…

使用Bootstrap 3开发响应式网站实践01,前期准备、导航区域等

"使用Bootstrap 3开发响应式网站实践"系列,将使用Bootstrap 3.2制作一个自适应网站,无论是在电脑.平板,还是手机上,都呈现比较好的效果.在电脑浏览器上的最终效果如下: 在手机上的呈现效果如下: 本篇主要包括: □ 前期准备□ 引入Bootstrap,jQuey文件等□ 搭建页面主体结构□ 导航区域 □ 前期准备 →使用Visual Studio 2012创建一个空的ASP.NET网站→把下载下来的Bootstrap 3中的css,fonts,js文件夹拷贝到网站根…

使用CSS3的@media来编写响应式的页面

首先要知道,我们为什么要写自适应的页面(响应式页面) [直接看干货] 众所周知,电脑.平板.手机的屏幕是差距很大的,假如在电脑上写好了一个页面,在电脑上看起来不错,但是如果放到手机上的话,那可能就会乱的一塌糊涂,这时候怎么解决呢?以前,可以再专门为手机定制一个页面,当用户访问的时候,判断设备是手机还是电脑,如果是手机就跳转到相应的手机页面,例如百度的就是,手机访问www.baidu.com就会跳转到m.baidu.com,这样做简直就是费力不讨好的活,所以聪明的程序员开发了一种自适应写法,即一次…

Bootstrap<基础十> 响应式实用工具

Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以通过媒体查询结合大型.小型和中型设备,实现内容对设备的显示和隐藏. 需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本.响应式实用工具目前只适用于块和表切换. 超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px) .visible-xs-* 可见隐藏隐藏隐藏 .visible-sm-* 隐藏可见隐藏隐藏 .visible-…

bootstrap入门-3.响应式原理

Bootstrap网格系统(Grid System) 响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 1 1 1 1 1 1 1 1 1 1 1 1 4 4 4 4 8 6 6 12 工作原理 · 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding). · 使用行来创建列的水平组. · 内容应该放置在列内,且唯有列可以是行的直接子元素. · 预定义的网格类,比如 .row 和 .col-xs…

使用jQuery开发一个响应式超酷整合RSS信息阅读杂志

在线演示1 本地下载申请达人,去除赞助商链接如果大家喜欢阅读博客文章的话,可能都会使用RSS阅读器,今天这里我们将使用jQuery来开发一个响应式的RSS信息阅读应用,使用它你可以将你喜欢的RSS文章以聚合的方式显示在同一个页面,类似一本在线的杂志或者刊物,你也可以自定义配置用来设定需要访问的RSS源,希望大家喜欢! 使用的js类库和jQuery插件: jQuery jQuery cookie jQuery socialist jQuery feed Cufon jquery pla…

AudioPlayer.js，一个响应式且支持触摸操作的jquery音频插件

AudioPlayer.js是一个响应式.支持触摸操作的HTML5 的音乐播放器.本文是对其官网的说用说明文档得翻译,博主第一次翻译外文.不到之处还请谅解.之处. JS文件地址:http://osvaldas.info/examples/audio-player-responsive-and-touch-friendly/audioplayer.js 你可以在右键点击上面的地址,然后选择另存为把JS文件保存到本地. 英文原文地址:http://osvaldas.info/audio-player…

一个响应式数据库框架SQLBrite,完美解决数据库和UI的同步更新！

相信小伙伴们在开发中或多或少都可能遇到过这样的问题:打开一个应用后,为了快速响应,先将数据库中的数据呈现给用户,然后再去网络上请求数据,请求成功之后将数据缓存至数据库,同时更新UI,但是我们经常会这样想,可不可以我只将数据缓存至数据库,当数据库中的数据发生改变时,UI会自动更新?这个当然可以实现,我们今天就来看看square公司推出的一个响应式数据库框架SQLBrite. 1.准备工作 SQLBrite项目地址:https://github.com/square/sqlbrite 将SQLBri…