标签:rip star 响应 左右 one 取值 link content 代码
1、Bootstrap有如下连网引用文件:
bootstrap.css ( 未经压缩 )
bootstrap.min.js( 压缩版,体积小,传输速度快 )
bootstrap.js
bootstrap.min.js
以上引用文件均为4.3.1版,且bootstrap的使用依赖 jQuery ,故使用前需引入 jquery-3.4.1.js 文件,实例如下(引用的是本地下载文件):
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
2、Bootstrap :用于开发响应式的移动优先网站,其提供了大量的组件,简化开发。
以下是 bootstrap 提供的关于 布局、内容、工具、组件等用法的详细说明:
注:以下均为bootstrap的类名,使用均是在<div class="container"></div>中的class内使用
1)布局( Layout )
注意:
如果开发响应式网站,务必在head中添加如下代码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
目的,使用相对单位解释px
网格系统,容器/行/列。一行分为12列,成为12栅格系统。
<!-- container 容器,容器中包含多行; row 行;( 由于container具有padding,所有row中定义margin取值为负数,用于抵消父元素padding ) col 列; col 特小屏 screen < 576px col-sm 小屏 576px < screen col-md 中屏 768px < screen col-lg 大屏 992px < screen col-xl 特大屏 1200px < screen 注:以上列取值从 col-1 ~ col-12,一行12列 col-2 表示占两列; 移动优先: 默认体现移动端(极小屏)的样式,如果想要覆盖这些样式,那需要添加对应大屏样式 px 左右内边距等于padding-left+padding-right; py 上下内边距等于padding-top+padding-bottom; pl 左内边距等于padding-left; pr 右内边距等于padding-right; pt 上内边距等于padding-top; pb 下内边距等于padding-bottom; 注:以上内边距取值从 px-1 ~ px-5,其中px-1=0.25rem;px-2=0.5rem;px-3=1rem;px-4=1.5rem;px-5=3rem; align-items-start 伸缩盒垂直(纵向)向上排列 align-items-center 伸缩盒垂直(纵向)居中排列 align-items-end 伸缩盒垂直(纵向)向下排列 justify-content-start 伸缩盒水平(横向)向左排列 justify-content-center 伸缩盒水平(横向)居中排列 justify-content-end 伸缩盒水平(横向)向右排列 order-序号 排序,序号从1-12,表示当前块的一个序号 offset-序号 偏移,序号从1-11,表示当前块向左或右偏移距离,1为一列的距离(均分为12列) ml-auto 自动左边距等于margin-left:auto; mr-auto 自动右边距等于margin-right:auto; -->
2)内容( Content )
3)工具( Utilities )
4)组件( Components )
标签:rip star 响应 左右 one 取值 link content 代码
原文地址:https://www.cnblogs.com/lidyfamily/p/11502706.html