Bootstrap响应式布局以及栅格框架
发布时间:2020-12-17 20:51:22 所属栏目:安全 来源:网络整理
导读:一、Bootstrap简单配置 简单使用Bootstrap,只需引入: script type="text/javascript" src="js/jquery.js" /script script type="text/javascript" src="js/bootstrap.js" /script link rel="stylesheet" href="css/bootstrap.css" / 为什么要引入link rel=
一、Bootstrap简单配置
简单使用Bootstrap,只需引入: <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/bootstrap.js" ></script> <link rel="stylesheet" href="css/bootstrap.css" /> 为什么要引入<link rel="stylesheet" href="css/bootstrap.css" />呢?举一个简单的例子: <div class="container"> <h1>Bootstrap学习</h1> <p> 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! </p> </div> 通过调节浏览器窗口的大小,我们可以看到,Bootstrap是对样式为container有着响应式布局的。 <div class="container"> <div class="row"> <div class="col-sm-6 col-md-4 col-lg-2 hidden-lg"><!--hidden-sm当屏幕小到sm时,该div隐藏 --> <h1>侧边栏</h1> <p> 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! </p> </div> <div class="col-sm-6 col-md-8 col-lg-10 "> <h1>Bootstrap学习</h1> <p> 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! </p> <div class="row"> <div class="col-sm-6 col-md-4 col-lg-2"> <h3>Bootstrap学习</h3> <p> 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! </p> </div> <div class="col-sm-6 col-md-4 col-lg-2 col-lg-offset-1 alert-danger"><!--alert-danger给该div一个醒目色块--> <h3>Bootstrap学习</h3> <p> 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! </p> </div> <div class="col-sm-6 col-md-4 col-lg-2"> <h3>Bootstrap学习</h3> <p> 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! </p> </div> <div class="visible-md"><!--当屏幕到 某个尺寸 时,显示该div--> <h2>屏幕到了这个尺寸了</h2> <p>只有尺寸合适才能看到哦</p> </div> </div> </div> </div> </div> <div class="row"> <div class="col-sm-6 col-md-4 col-lg-2"><!--混合使用,自适应当前设备--> <h1>Bootstrap学习</h1> <p> 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! </p> </div> <div class="col-sm-6 col-md-8 col-lg-2"> <h1>Bootstrap学习</h1> <p> 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! 以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用! </p> </div> </div> </div> 实现的效果: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |