码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap-4.3.1版本的使用方法

时间:2019-09-10 20:46:56      阅读:269      评论:0      收藏:0      [点我收藏+]

标签: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 )

Bootstrap-4.3.1版本的使用方法

标签:rip   star   响应   左右   one   取值   link   content   代码   

原文地址:https://www.cnblogs.com/lidyfamily/p/11502706.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!