bootstrap网格系统.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!--bootstrap要引入的文件:bootstrap.min.css,jquery.min.js,bootrap.min.js-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<!--要在bootstrap之前引入jquery,bootstrap依赖JQUERY,因为bootstrapJS里要使用$这个jquery变量-->
<script src="js/popper.js" type="text/javascript" charset="utf-8"></script>
<!--如果你要用bootstrap使用一些提示性的交互,那么就需要引入提示性的框架popper.js,因为bootstrap的提示就是依赖popper-->
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--首先要设置一个容器-->
<div class="container">
<!--每一行用row来包裹-->
<!--仅设置col,等宽,可以使div平均分成相对应的份数-->
<!--boostrap网格系统,平均分成12份-->
<!--使用boostrap框架就是为了提高效率,省去设计师,也不需要精确到像素去实现页面,如果要像素级还原设计图稿,那么依然还需要大量的书写css-->
<!--
超小<576px .col-
小≥576px .col-sm-
中等≥768px .col-md-
大≥992px .col-lg-
超大≥1200px .col-xl-
-->
<!--使用col-{breakpoint}-auto类根据内容的自然宽度调整列的大小。-->
<!--网格里面还可以继续嵌套网格,所有的容器,都是12格进行划分-->
<div class="row">
<div class="col-12 col-lg-2 col-xl-1 bg-danger order-3">
第一部分内容
</div>
<div class="col-12 col-lg-2 col-xl-5 bg-info order-2">
第二部分内容
</div>
<div class="col-12 col-lg-8 col-xl-6 bg-warning order-1">
第三部分内容
</div>
</div>
<div class="row">
<div class="col-12 col-lg-2 col-xl-1 bg-danger">
第一部分内容
</div>
<!--使用col-{breakpoint}-auto类根据内容的自然宽度调整列的大小。-->
<div class="col-12 col-lg-auto col-xl-5 bg-info">
第二部分内容
</div>
<div class="col-12 col-lg-8 col-xl-6 bg-warning">
<div class="row">
<div class="col-3 bg-dark">
3
</div>
<div class="col-9 bg-danger">
9
</div>
</div> </div>
</div>
<div class="row no-gutters">
<div class="col">col</div>
<div class="col">col</div>
<!--<div class="w-100"></div>-->
<div class="col">col</div>
<div class="col">col</div>
</div> </div> </body>
</html>
bootstrap网格系统.html的更多相关文章
- 第四篇.Bootstrap网格系统偏移列和嵌套列
偏移列: 在bootstrap网格系统中我们可以使用偏移列来达到让某列右移的效果,如下所示: <div class="row"> <div class=" ...
- 详解Bootstrap网格系统
bootstrap框架中的网格系统就是将容器平分成12份,在使用的时候可以根据实际情况重新编译LESS/SASS源码来修改12这个数值.bootstrap框架的网格系统工作原理: 1.数据行(.row ...
- bootstrap学习笔记--bootstrap网格系统
移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动引用另一个 CSS,才能让整个项目友好的支持移动设备. 现在不一 ...
- 使用bootstrap网格系统自适应盒子宽度时保持所有盒子高度一致。
使用了bootstrap网格系统的好处是很容易便实现了响应式布局,盒子可以根据设置的样式,随着屏幕的大小改变而自动改变宽度,但是也存在一个问题,那就是盒子的高度是由盒子的内容决定的,如果盒子里的内容不 ...
- Bootstrap -- 网格系统、排版样式类、 <blockquote>、 <abbr> 元素
Bootstrap -- 网格系统.排版样式类. <blockquote>. <abbr> 元素 1. Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏 ...
- Bootstrap 网格系统(Grid System)的工作原理 - 媒体查询
媒体查询 媒体查询是非常别致的"有条件的 CSS 规则".它只适用于一些基于某些规定条件的 CSS.如果满足那些条件,则应用相应的样式. Bootstrap 中的媒体查询允许您基于 ...
- Bootstrap 网格系统(Grid System)实例5
Bootstrap 网格系统(Grid System)实例5:手机,平板电脑,笔记本或台式电脑 <!DOCTYPE html><html><head><met ...
- Bootstrap 网格系统(Grid System)实例4
Bootstrap 网格系统(Grid System)实例4:中型和大型设备 <!DOCTYPE html><html><head><meta http-eq ...
- Bootstrap 网格系统(Grid System)实例3
Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv= ...
- Bootstrap 网格系统(Grid System)实例2
Bootstrap 网格系统(Grid System):堆叠水平,两种样式 <!DOCTYPE html><html><head><meta http-equ ...
随机推荐
- 我用阿里云的虚拟云主机,也能配置https加密吗?
我用阿里云的虚拟云主机,也能配置https加密吗?答案是YES. 整个过程比想象中还要简单,都是一些基本的配置,虚拟主机 Web托管都可以很容易的搞定https. 首先我们要了解一下,阿里云是怎么支持 ...
- jar 命令使用
1.jar命令一般用来对jar包文件处理,jar包是由JDK安装目录\bin\jar.exe命令生成的,当我们安装好JDK,设置好path路径,就可以正常使用jar.exe命令,它会用lib\tool ...
- 一台机器上搭建多个redis实例的配置文件修改部分
1.单个redis服务搭建请参考:redis服务搭建 2.一台Redis服务器,分成多个节点,每个节点分配一个端口(6380,6381…),默认端口是6379. 每个节点对应一个Redis配置文件,如 ...
- 冒泡排序--JavaScript描述
相信凡是编程入门的都接触过冒泡排序算法,排序算法在编程中经常用到. 1. code /** * 冒泡排序 * 1.比较的轮数等于总数 - 1 * 2.比较次数等于要比较的个数 - 1 * --比较从第 ...
- Thinkphp5.0终章
thinkphp5.0最终总结 前期刚开始我是跟着b站上的千峰教育的视频走的,一路上做笔记进行深化与实际操作,中间因为不会开报错,并且视频里面也没有讲到怎么弄报错,因为是新手,那种出错了却不知道错在哪 ...
- MySQL日期和时间类型笔记
最近在看<MySQL技术内幕:SQL编程>并做了笔记,这是一篇笔记类型博客,分享出来方便自己复习,也可以帮助其他人 一.日期时间类型所占空间对比 各种日期时间数据类型所占的空间: 类型 所 ...
- html、css以及javascript的注释方式
HTML:<!--注释内容 -->; CSS:/* 注释内容*/ JS: //注 释内容; 或者块/* 注释内容 */, sublime中注释方法:选中注释内容+ctrl+/ , ...
- .NET Core 读取配置文件方式总结
基于.NET Core的跨平台开发,配置文件与之前.NET Framework采用xml的config文件不同,目前主要是采用json文件键值对配置方式读取. 参考网上相关资料总结如下: 一.引入扩展 ...
- C语言-查找一个元素在数组中的位置
#include<stdio.h> #include <stdlib.h> #include <time.h> int search(int key, int a[ ...
- SecureCRT连接虚拟机下的CentOS7
1.首先在VMWare下配置CentOS为桥接模式: 2.查看本机ip: 3.ip addr查看centos的mac地址: 4.在root权限下修改/etc/sysconfig/network-scr ...