`

响应式布局的实用类

 
阅读更多
responsive-layout-utility-classes-finish.html 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式布局的实用类</title>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<!--[if lt IE 9]>
       <script src="../bootstrap/js/html5.js"></script>
<![endif]-->
</head>

<body>
<div class="container">
  <h1 class="page-header">响应式布局的实用类<small> 使用Bootstrap网格系统布局网页</small></h1>
  <p>.visible-phone:在智能手机设备上显示这个元素，在其它设备上隐藏这个元素</p>
  <p>.visible-tablet:在平板电脑上显示这个元素，在其它设备上隐藏这个元素</p>
  <p>.visible-desktop:在桌面电脑上显示这个元素，在其它设备上隐藏这个元素</p>
  <div class="row">
    <div class="page-header clearfix">
      <div class="span4"><img src="../images/phone.png" alt="智能手机"></div>
      <div class="span4 hidden-phone"><img src="../images/tablet.png" alt="平板电脑"></div>
      <div class="span4 visible-desktop"><img src="../images/desktop.png" alt="桌面电脑"></div>
    </div>
  </div>
</div>
<script src="../bootstrap/js/jquery-1.7.2.min.js"></script> 
<script src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>
  • 大小: 19.8 KB
  • 大小: 12.8 KB
  • 大小: 20.4 KB
分享到：
| Bootstrap表格
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    响应式布局的简单案例

    响应式布局的另一个关键点是使用了弹性盒子模型（flexbox），比如在代码中的.fen类使用了column-count和column-gap属性来设置列数和列间隙。这些CSS3的新特性提供了更灵活的方式来布局和排列页面元素，使得在响应式...

    基于Bootstrap3的响应式布局网站教程源码（五）

    基于Bootstrap3的响应式布局网站教程源码（五），基础入门，适合新手，有齐全的注释，详细教程参考我的博文。除了博文所写之外，我还更新了许多实用的源码。 为了防止有些人不知道怎么用，我还不厌其烦的讲解下，...

    bootstrap栅格系统响应式布局

    通过熟练掌握这些知识点，开发者能够构建出强大的响应式布局，确保在任何设备上都能提供出色的视觉效果和交互体验。在实践中，结合示例代码和不断的试验，可以更深入理解Bootstrap栅格系统的灵活性和实用性。在提供...

    响应式布局字体大小变化利器插件jquery.fontFlex.zip

    总的来说，"jquery.fontFlex"插件是一个实用的工具，它帮助开发者创建更加流畅和一致的响应式布局，特别是在处理字体缩放方面。结合使用jQuery的事件处理能力和CSS的响应式设计原则，这个插件可以有效地提升网页在...

    另外一款超棒的响应式布局jQuery插件 – Freetile.js

    另一方面，“工具”标签表明Freetile.js是一个实用的开发辅助工具，可以帮助简化响应式布局的工作流程。 在www.gbin1.com这个网站中，可能包含了更多关于Freetile.js的使用教程、示例代码和其他资源，对于学习和...

    html5 bootstrap响应式布局的垂直时间轴代码.zip

    响应式布局是现代网页设计的关键，它确保网页在不同设备和屏幕尺寸上都能正常显示。Bootstrap通过其灵活的网格系统实现这一点，它将页面分为12列，允许内容在小屏设备上堆叠或在大屏设备上并排显示。在这个垂直时间...

    基于ASP的TSDQQ响应式布局网址导航系统带后台 v2.161014 UTF-8版.zip

    在"基于ASP的TSDQQ响应式布局网址导航系统带后台 v2.161014 UTF-8版.zip"中，我们可以推测该系统是一个网站导航平台，它采用了响应式设计，能够适应不同设备的屏幕尺寸，提供良好的跨平台浏览体验。响应式布局是现代...

    利用Bootstrap制作产品着陆页（响应式布局）源文件

    响应式布局是现代网页设计的关键特性，它允许网页在不同尺寸的设备上呈现良好，无论是桌面电脑、平板还是手机。Bootstrap通过其预定义的CSS类、网格系统和媒体查询实现了这一目标。以下是你在创建产品着陆页时可能会...

    jQuery bootstraps响应式企业公司类网站模板

    "jQuery Bootstraps响应式企业公司类网站模板"就是这样一款专为现代企业设计的多功能网页模板，它以其灵活的布局、丰富的功能和优秀的用户体验，成为企业网站建设的理想之选。 首先，我们来了解什么是jQuery和...

    商务手机APP介绍网站模板是一款响应式布局商务手机APP介绍网站模板下载。.rar

    响应式布局是现代网页设计的重要特性，它使网站能够自动适应不同设备的屏幕尺寸，无论是手机、平板还是电脑，都能提供良好的用户体验。这种模板主要用于展示商务手机APP的功能、特点、使用场景和下载方式，帮助...

    响应式绿色环保

    Bootstrap提供了一系列预先设计的响应式布局、导航栏、按钮、表单、图像和其他UI元素，开发者可以通过简单的类选择器快速构建界面。其栅格系统（Grid System）尤其适用于创建适应性强的布局，该系统基于12列的网格，...

    html5响应式左右分栏个人主页模板

    为了实现这个模板，开发者可能使用了Bootstrap框架，这是一个流行的响应式前端框架，提供了预设的CSS类和组件，可以快速构建响应式布局。当然，也有可能是纯手工编写CSS和HTML，这样可以更好地控制每一部分的设计...

    书店商城网站html模板下载是一款简单的响应式布局网站首页书店商城网站模板html源码下载，兼容不同像素的设备。_ht.rar

    响应式布局是现代网页设计的关键技术之一，它允许网页在不同设备上自适应显示，无论是桌面电脑、平板电脑还是智能手机，都能提供良好的用户体验。这款"书店商城网站html模板下载"正是基于这一理念设计的，旨在为用户...

    (自适应移动端)棕色家具装修pbootcms网站模板 响应式家具建材类网站源码下载.zip

    响应式布局可以根据用户的设备类型，如桌面电脑、平板或手机，自动调整网页的布局和样式，确保在任何设备上都能提供良好的浏览体验。这对于家具装修和建材行业的网站尤其重要，因为客户可能在家中、办公室或施工现场...

    【T10149】响应式餐饮美食类网站模板(自适应手机端).rar

    综上所述，【T10149】响应式餐饮美食类网站模板结合了现代网页技术，旨在为餐饮业提供一个既美观又实用的在线平台，能够适应多种设备，提升用户访问体验。无论是展示菜品、吸引顾客还是进行在线交易，这款模板都能...

    基于响应式页面的新闻资讯类门户网站的设计与实现代码

    Bootstrap框架是一个流行的选择，它提供了一套响应式布局和组件，能快速创建美观且适应多设备的界面。JavaScript负责交互性，如表单验证、动态加载内容等。现代前端库和框架，如React或Vue.js，可以提高开发效率，...

    web响应式布局中iframe自适应的方法

    在Web开发中，响应式布局是一项关键技能，它允许网页根据不同的设备屏幕尺寸和方向自动调整布局，提供良好的用户体验。然而，在响应式布局中...对于处理`iframe`在响应式布局中的问题，这是一种实用且优雅的解决方案。

    CSS3产品图文列表响应式布局

    【CSS3产品图文列表响应式布局】是一种现代网页设计技术，它主要利用了CSS3的新特性来实现网页元素在不同设备和屏幕尺寸下自动调整布局，以提供最佳的视觉体验。这种布局方式广泛应用于购物商城的商品列表展示和企业...

    响应式手机新闻HTML5模板，响应布局，兼容手机设备，适合新闻杂志和博客网站模板 .rar

    它结合了HTML5的强大功能和响应式布局的概念，使得新闻、杂志和博客类网站能在不同的移动设备上流畅运行。 HTML5是超文本标记语言（HTML）的第五个版本，引入了许多新的元素和API，以支持更丰富的媒体、更好的数据...

    响应式web设计实践

    4. **断点的选择**：选择合适的断点对于创建有效的响应式布局至关重要。这些断点通常是基于常见的设备屏幕尺寸来设定的，如手机、平板和桌面电脑的典型宽度。 5. **用户体验优化**：响应式设计不仅仅是关于布局的...

Magicbox
Global site tag (gtag.js) - Google Analytics