Bootstrap3基础 row 栅格系统(响应式) 简单示例

礼悟:
     公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
          虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。


               ide:visual studio 2017  
            browser:Firefox / Chrome
     bootstrap:3.3.7

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    <!-- 页面的宽度与设备屏幕的宽度一致 -->
	<meta name="viewport" content="width=device-width">
	<!-- 初始缩放比例 1:1,没有横线滚动的效果 -->
	<meta name="viewport" content="initial-scale=1">
	<!-- 禁止用户缩放 -->
	<meta name="viewport" content="user-scalable=no">

    <!-- 引入外部bootstrap的css文件(压缩版) -->
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<!-- NO.1 先引入jQuery文件(压缩版) -->
	<script src="bootstrap/js/jquery.min.js"></script>
	<!-- NO.2 再引入js文件(压缩版) -->
	<script src="bootstrap/js/bootstrap.min.js"></script>

    <style>
        div[class*="col-"] {
            border:1px solid red;
        }
    </style>
</head>
<body style="background-color:gray;">
    <div class="container" style="background-color:white;">
        <div class="row">
            <!--
                                        结合下面的代码可以计算出
                md:中等屏幕大小 PC      一行三列
                xs:小的屏幕大小 手机    一行一列
                sm:平板电脑             一行两列

                这个就成响应式啦,布局会随着屏幕大小的变化而变化
                可以通过改变浏览器的大小而查看效果
                -->
            <div class="col-md-4 col-xs-12 col-sm-6">
                <img src="images/fh.jpg" class="img-responsive img-thumbnail"/>
                <h1 class="page-header">凤凰</h1>
                <p>
                    凤凰,亦作“凤皇”,古代传说中的百鸟之王。
                    雄的叫“凤”,雌的叫“凰”,总称为凤凰,亦称为丹鸟、火鸟、鶤鸡、威凤等。
                    常用来象征祥瑞,凤凰齐飞,是吉祥和谐的象征,自古就是中国文化的重要元素。
                </p>
            </div>
            <div class="col-md-4 col-xs-12 col-sm-6">
                <img src="images/fh.jpg" class="img-responsive img-thumbnail"/>
                <h1 class="page-header">凤凰</h1>
                <p>
                    凤凰,亦作“凤皇”,古代传说中的百鸟之王。
                    雄的叫“凤”,雌的叫“凰”,总称为凤凰,亦称为丹鸟、火鸟、鶤鸡、威凤等。
                    常用来象征祥瑞,凤凰齐飞,是吉祥和谐的象征,自古就是中国文化的重要元素。
                </p>
            </div>
            <div class="col-md-4 col-xs-12 col-sm-6">
                <img src="images/fh.jpg" class="img-responsive img-thumbnail"/>
                <h1 class="page-header">凤凰</h1>
                <p>
                    凤凰,亦作“凤皇”,古代传说中的百鸟之王。
                    雄的叫“凤”,雌的叫“凰”,总称为凤凰,亦称为丹鸟、火鸟、鶤鸡、威凤等。
                    常用来象征祥瑞,凤凰齐飞,是吉祥和谐的象征,自古就是中国文化的重要元素。
                </p>
            </div>
        </div>
    </div>
</body>
</html>

效果



Bootstrap,优秀的前端开源框架,值得学习。
学习资源:v3.bootcss.com + itcast和itheima视频库 + 清净的心地。如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。

原文地址:https://www.cnblogs.com/jizuiku/p/8280835.html

时间: 2024-10-01 08:37:40

Bootstrap3基础 row 栅格系统(响应式) 简单示例的相关文章

Bootstrap3基础 row 栅格系统(非响应式),1行最多12列

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Firefox / Chrome   bootstrap:3.3.7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

Bootstrap3基础 col-md-offset 栅格系统向右偏移

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Firefox / Chrome   bootstrap:3.3.7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

响应式开发——示例一

直接贴代码,效果图在后面: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>响应式布局</title> <link rel="stylesheet" href="response.css"> </head> <bo

(基础)Web数据库访问编写简单示例——图书售卖系统示例2

南邮web技术的第三次实验,看起来与上次第二次的内容差别不大,但这次要访问数据库.用php连接的数据库. 代码如下:(分为main.html.process.php.order_query.html.process_query.php) mian.html <html> <head> <title>Welcome to book seller</title> </head> <body> <form action = "

Python3基础 生成器推导式 简单示例

? ???????Python : 3.7.0 ?????????OS : Ubuntu 18.04.1 LTS ????????IDE : PyCharm 2018.2.4 ??????Conda : 4.5.11 ???typesetting : Markdown ? code """ @Author : 行初心 @Date : 18-9-24 @Blog : www.cnblogs.com/xingchuxin @Gitee : gitee.com/zhichengji

RabbitMQ基础组件和SpringBoot整合RabbitMQ简单示例

交换器(Exchange) 交换器就像路由器,我们先是把消息发到交换器,然后交换器再根据绑定键(binding key)和生产者发送消息时的路由键routingKey, 按照交换类型Exchange Type(fanout,direct,topic)把消息投递到对应的队列.(明白这个概念很重要,后面的代码里面充分体现了这一点). RabbitMQ基础知识可查看消息队列RabbitMQ基础知识详解 队列(Queue) 存放消息的队列. 绑定(Binding) 交换器怎么知道把这条消息投递到哪个队列

JavaSE8基础 函数返回一个匿名对象 简单示例

os :windows7 x64    jdk:jdk-8u131-windows-x64    ide:Eclipse Oxygen Release (4.7.0)        代码: class Javaer { public void sayHello() { System.out.println("Java Hello"); } } class Demo { public static Javaer getJavaerObject() { return new Javaer(

css3基础 :target 目标伪类选择器 简单示例

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 学习链接: http://blog.csdn.net/atleks/article/details/38966691 代码 <!DOCTYPE html>

css3基础 :nth-child(odd奇/even偶) 简单示例

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu