您的位置：首页 > Web前端 > BootStrap

bootstrap框架教程

2020-07-23 12:15 691 查看

头部样式

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=dege">
<!-- IE9以下时使用 -->
<!-- [if lt IE 9]
<script src="https://oss.maxcdh.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
[endif] -->
<!-- 引入css的bootstrap样式网址 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>

col

一行里面的列所占宽度 

<!-- 父盒子必须类名为container -->
<div class="container">
<div class="row">
<!-- col-lg 大于1200(大桌面);col-md大于992(桌面);col-sm大于768(平板);col-xs小于768(手机) -->
<!-- 和大于12会另起一行 -->
<div class="col-lg-3 col-md-7 col-sm-4 col-xs-10 nav1">5123123123</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-5 nav2" >5</div>
<div class="col-lg-6 col-md-2 col-sm-4 col-xs-5 nav3">1</div>
</div>
</div>

offset 偏移:相当于给col添加margin-left

<div class="container">
<div class="row">
<div class="col-lg-4" style="background-color: chartreuse;">10</div>
<!-- 向右偏移了4格 -->
<div class="col-lg-4 col-lg-offset-4">20</div>
</div>
</div>

push:向右偏移 pull:向左偏移

<!-- 父盒子必须类名为container -->
<div class="container">
<div class="row">
<!-- 向右偏移了8格 -->
<div class="col-lg-4 col-lg-push-8" style="background-color: chocolate;">左边</div>
<!-- 向左偏移了4格 -->
<div class="col-lg-8 col-lg-pull-4" style="background-color:cornflowerblue;">右边</div>
</div>
</div>

hidden

<div class="container">
<div class="row">
<!-- col-lg 大于1200(大桌面);col-md大于992(桌面);col-sm大于768(平板);col-xs小于768(手机) -->
<!-- 和大于12会另起一行 -->
<!-- 在超小屏和小屏下,1会隐藏 -->
<div class="col-lg-6 hidden-xs hidden-sm" style="background-color: cornflowerblue;">1</div>
<div class="col-lg-6" style="background-color: #ccc;">3</div>
</div>
</div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航