<Bootstrap> 学习笔记二. 栅格系统的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css">
    <script src="bootstrap/js/jquery-3.2.1.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
</head>
<body style="background: white;">

<!--栅格系统的使用-->
<div class="container-fluid" style="background: white;">
    <div class="row">
        <div class="col-md-4 col-xs-6 col-sm-3">
            <img src="1.png" alt="说明" class="img-thumbnail img-responsive">
            <h3>RayLee</h3>
            <p>RayLee</p>
        </div>
        <div class="col-md-4 col-xs-6 col-sm-3">
            <img src="1.png" alt="说明" class="img-thumbnail img-responsive">
            <h3>RayLee</h3>
            <p>RayLee</p>
        </div>
        <div class="col-md-4 col-xs-6 col-sm-3">
            <img src="1.png" alt="说明" class="img-thumbnail img-responsive">
            <h3>RayLee</h3>
            <p>RayLee</p>
        </div>
    </div>

</div>
</body>
</html>

原文地址：https://www.cnblogs.com/ZeroHour/p/8287451.html

时间： 2024-10-28 14:52:52

<Bootstrap> 学习笔记二. 栅格系统的使用的相关文章

BootStrap学习笔记之栅格系统

栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局. 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中.Bootstrap 栅格系统的工作原理: 1. 行(row)必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度

<Bootstrap> 学习笔记六. 栅格系统使用案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <link rel="stylesheet&

Bootstrap学习笔记(二) 表单

在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名"form-control",将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果

BootStrap 学习笔记二

BootStrap学习笔记一: 学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 为了让 IE 浏

bootstrap学习笔记<二>

标题 bootstrap中重新定义了h1~h6标签,具体差别如下: 在bootstrap中其他任何标签使用class="h1"~class="h6"都可以实现h1~h6的标题效果. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>标题(一)</title> <link rel="style

Linux学习笔记<二十>——系统裁剪之二

在系统裁剪之一的基础上,给系统添加挂载文件系统.关机重启.设置主机名.运行对应级别的服务脚本.启动终端.装载网卡驱动并启用网络等功能. 挂载文件系统 ①重新挂载根文件系统为可读写 vim 编辑/mnt/sysroot/etc/rc.d/rc.sysinit添加以下行 echo "Remount rootfs..." mount -n -o remount,rw / ②vim 编辑/mnt/etc/fstab /dev/sdb2 / ext3 default

Bootstrap学习笔记(二)代码

pre { display: block; padding: 9.5px; margin: 0 0 10px; font-size: 13px; line-height: 1.42857143; color: #333; background-color: #f5f5f5; border: 1px solid #ccc } 1.代码 1.<code>:一般是针对于单个单词或单个句子的代码 Bootstrap的代码风格有三种: <code> <pre> <kbd&g

angularjs 学习笔记(二) ----- bootstrap框架

1. 下载新的jquery-1.11.1文件. 2. 下载新的bootstrap文件. 3. 选择流式布局的模板填充入index.html文件. 4. 将top.foot转为nginclude文件 nginclude必须使用$scope对象,因此需要设置一个全局的mainctrl来将字符串或全局变量注入$cope中. $rootScope.global =global; 直接将全局变量global赋值给$rootScope,并且之后的子$Scope会获得继承,静态定义与ctrl分开. 5

BootStrap 学习笔记一

BootStrap学习笔记一: 学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists 1.HTML5文档类型 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 2.为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签. <meta name="viewport" cont