html --- bootstrap 框架 (栅格系统布局)
2024-08-31 08:08:51
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no,minimal-ui"/>
<title>标题</title>
<!-- ****** 必须引入 .css 文件 -->
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="index.css">
</head>
<!-- *********
bootstrap的核心是:用@media and screen(max - min)来判断当前屏幕得尺寸分辨率 来进行一些样式,布局的改变 -->
<body>
<!-- 第一:首先container 类名 里面包裹 要写的代码 -->
<div class="container">
<!-- 第二:每一行 都应该用row 包裹起来 -->
<div class="row hidden-xs">
<!-- 第三:一行分为十二列 有col-xs-*(超小屏幕 <768) col-sm-*(平板电脑 >768)col-md-*(中型台式电脑 >992 )col-lg-*(大型台式 >1200) -->
<div class="col-xs-12 col-sm-3 col-md-9 col-lg-3">首页</div>
<div class="col-xs-12 col-sm-3 col-md-1 col-lg-3">导航</div>
<div class="col-xs-12 col-sm-3 col-md-1 col-lg-3">辩题</div>
<!-- 第四:hidden-* 只是针对当前的一种布局 类名 进行 实现隐藏。而visible-*-block 是对于除了自身以外不符合条件的都会隐藏 -->
<div class="col-lg-3 col-sm-3 col-md-1 hidden-lg">第四个</div>
</div>
<!-- 第五:当前row 类名的盒子,在xs 的时候让当前的盒子 显示。 上面的row的盒子 在xs 的时候消失-->
<div class="row visible-xs-block">
<!-- 第六:用bootsrap 封装的类名 的按钮 默认的样式 -->
<button type="button" class="btn btn-success pull-right">成功</button>
<ul>
<li>我是第一个盒子</li>
<li>我是第二个黑子</li>
<li>我是第三个盒子</li>
</ul>
</div>
</div>
</body>
<!-- ******** 如果 引用框架的组件,记得先加载jq 因为它开发组件的本身是用的jq -->
<script src='./node_modules/jquery/dist/jquery.min.js'></script>
<script src='./node_modules/bootstrap/dist/js/bootstrap.min.js'></script>
</html>
最新文章
- 2.sort 排序命令讲解
- vmware 虚拟机通信拿不到 inet addr 的解决办法
- java:IO流学习小结
- test 2016-12-28
- 在Ubuntu中安装Python3
- 【Go语言】集合与文件操作
- Oracle--10(ROW_NUMBER() OVER)
- Extjs-工具条和菜单 Ext.menu和Ext.Toolbar
- ubuntu14.04 swap not avalible交换分区不能使用
- FJ省队集训DAY4 T3
- 论山寨手机与Android联姻 【7】 MTK手机软件系统
- centos6.4 ceph安装部署之cephFS
- THE ROAD TO PROGRAM
- -1-0 Java 简介 java是什么 java简单介绍
- 使用jquery中$.each()方法来循环一个数据列表
- flutter 读写文件
- sql server 备份与恢复系列二 事务日志概述
- Python全栈开发记录_第二篇(文件操作及三级菜单栏增删改查)
- <;20190303>;大厂的风度,firmware每年更新!
- 用指定的用户名和密码无法登录到该ftp服务器
热门文章
- 为Activity生成桌面快捷方式
- View的双击动作
- windows如何批量添加路由表
- Bayes++ Library入门学习之熟悉UKF相关类
- Example of working with a dump.
- k近邻法(k-nearest neighbor, k-NN)
- WHU 1537 Stones I
- 【Henu ACM Round#19 B】 Luxurious Houses
- 安卓Gallery配合ImageSwitcher不显示图片
- 智课雅思短语---二、exert positive/ negative effects on…