bootstrap10-网格系统实例:手机、平板电脑、台式电脑

简介:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>bootstrap10</title>

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  

</head>

<body>

<div class="container">

<h1>Hello, world!</h1>


<div class="row">

<div class="col-sm-3 col-md-6 col-lg-8" style="background-color: #dedef8; 

         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 

            enim ad minim veniam, quis nostrud exercitation ullamco laboris 

            nisi ut aliquip ex ea commodo consequat. 

        </p>


        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 

            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 

            quae ab illo inventore veritatis et quasi architecto beatae vitae 

            dicta sunt explicabo. 

        </p>

</div>


<div class="col-sm-9 col-md-6 col-lg-4" style="background-color: #dedef8;

         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 

            accusantium doloremque laudantium.

         </p>


         <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 

            consectetur, adipisci velit, sed quia non numquam eius modi 

            tempora incidunt ut labore et dolore magnam aliquam quaerat 

            voluptatem. 

        </p>

          </div>

</div>

</div>

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

   <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>

本文转自  素颜猪  51CTO博客,原文链接:http://blog.51cto.com/suyanzhu/1895668
相关文章
|
3月前
|
存储 监控 iOS开发
iOS应用崩溃了,如何通过崩溃手机连接电脑查找日志方法
在iOS应用开发过程中,调试日志和奔溃日志是开发者必不可少的工具。当iOS手机崩溃时,我们可以连接电脑并使用Xcode Console等工具来查看日志。然而,这种方式可能不够方便,并且处理奔溃日志也相当繁琐。克魔助手的出现为开发者带来了极大的便利,本文将详细介绍其功能和使用方法。 克魔助手会提供两种日志,一种是实时的,一种的是崩溃的。(由于崩溃日志的环境很麻烦,目前只展示实时日志操作步骤)
|
6月前
|
缓存 网络协议
DNS中电脑网址能打开,用手机浏览器不行,需要解析什么?
DNS中电脑网址能打开,用手机浏览器不行,需要解析什么?
64 1
|
27天前
|
机器学习/深度学习 人工智能 安全
未来智能手机系统的发展趋势与挑战
移动应用与系统领域一直处于快速发展的状态,未来智能手机系统将面临更多挑战和机遇。本文探讨了在人工智能、物联网和安全性方面的新发展趋势,以及如何应对未来智能手机系统的挑战。
|
1月前
|
人工智能 安全 vr&ar
未来智能手机系统的发展趋势与展望
【2月更文挑战第11天】随着科技的快速发展,智能手机已经成为人们生活中不可或缺的一部分。本文将探讨未来智能手机系统的发展趋势,以及对安卓和iOS系统的展望,旨在带领读者深入了解智能手机操作系统的未来发展方向。
28 5
|
1月前
|
移动开发 API HTML5
HTML5响应式自动采集API壁纸系统源码自适应手机端
HTML5响应式自动采集API壁纸系统源码自适应手机端
39 11
HTML5响应式自动采集API壁纸系统源码自适应手机端
|
3月前
|
Android开发 iOS开发
【教程】如何在苹果手机上查看系统文件?
苹果手机与安卓手机不同,无法直接访问系统文件夹。但是,如果我们想要查看苹果手机的系统文件,可以借助一些工具来实现。本文将介绍一款名为克魔助手的iOS设备管理软件,它能帮助我们轻松查看苹果手机的系统文件。 连接iPhone到电脑,打开克魔助手,用数据线将iPhone连接到电脑上。连接成功后,克魔助手会自动读取iPhone的信息,并显示在软件的主界面上。
【教程】如何在苹果手机上查看系统文件?
|
4月前
|
数据可视化 Java 数据挖掘
手机号归属地查询实例
手机号归属地查询实例
|
4月前
利用电脑投放手机声音且可不冲突同时播放电脑声音的方法
利用电脑投放手机声音且可不冲突同时播放电脑声音的方法
|
4月前
|
前端开发 JavaScript Java
基于SSM实现手机销售商城系统
基于SSM实现手机销售商城系统
|
4月前
|
移动开发 前端开发 HTML5
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例(超详细必看 附源码)
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例(超详细必看 附源码)
50 0