bootstrap 栅栏系统练习1

来源：互联网发布：新闻推荐系统数据集编辑：程序博客网时间：2024/05/21 17:13

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><!-- 导入 css--><link rel="stylesheet" href="css/bootstrap.min.css" /><!--导入jquery.js--><script type="text/javascript" src="js/jquery-1.11.0.js" ></script><!--导入bootstrap.js--><script type="text/javascript" src="js/bootstrap.min.js" ></script></head><body><!--<div class="container"><div style="border: 1px solid red;">123</div></div>--><!--<div class="container-fluid"><div style="border: 1px solid red;">123</div></div>--><div class="container-fluid"><div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div><div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div><div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div><div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div><div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div><div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div><div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div><div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div><div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div><div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div><div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div><div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div></div></body></html>

Bootstrap默认的栅格系统为12列，形成一个940px宽的容器，默认没有启用响应式布局特性。如果加入响应式布局CSS文件，栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下，列将不再固定并且会在垂直方向堆叠。

阅读全文

0 0