BootStrap4:栅格系统

1、container容器

  • container:固定宽度的容器
  • container-fluid:响应式容器

2、栅格选项

Bootstrap4 总共有五个栅格等级,每个响应式分界点隔出一个等级

BootStrap4:栅格系统_第1张图片

Ps:.row上带有margin-left: -15px;margin-right: -15px;属性,你可以在.row上上定义.no-gutters属性,从而消除这个属性

实例一:等宽布局

<body> 
          <div class="container"> 
                <div class="row"> 
                        <div class="col"> 1 of 2 div> 
                        <div class="col"> 2 of 2 div> 
                div> 
                <div class="row"> 
                        <div class="col"> 1 of 3 div> 
                        <div class="col"> 2 of 3 div> 
                        <div class="col"> 3 of 3 div> 
                div> 
           div>
body>

实例二:等宽多行

<body> 
      <div class="container">
           <div class="row">
                 <div class="col">Columndiv>
                 <div class="col">Columndiv>
                 
                 <div class="w-100">div>
                 <div class="col">Columndiv>
                 <div class="col">Columndiv>
            div>
       div>
body>

3、栅格对齐(垂直对齐)

  • align-items-start:垂直居上
  • align-items-center:垂直居中
  • align-items-center:垂直居下

示例:垂直对齐

样式效果:

BootStrap4:栅格系统_第2张图片

源代码:

<body> 
     <div class="container">
           <div class="row align-items-start ">
                <div class="col">One of three columnsdiv>
                <div class="col">One of three columnsdiv>
                <div class="col">One of three columnsdiv>
            div>
            <div class="row align-items-center ">
                <div class="col">One of three columnsdiv>
                <div class="col">One of three columnsdiv>
                <div class="col">One of three columnsdiv>
            div>
            <div class="row align-items-end">
                <div class="col">One of three columnsdiv>
                <div class="col">One of three columnsdiv>
                <div class="col">One of three columnsdiv>
           div>
     div>
body>  

4、栅格对齐(水平对齐)

  • justify-content-start:左对齐
  • justify-content-center:居中对齐
  • justify-content-end:右对齐

样式效果:

BootStrap4:栅格系统_第3张图片

源代码:

<div class=“container”>
	<div class="row justify-content-start">
	        <div class="col-4"> One of two columns div>
	        <div class="col-4"> One of two columns div>
	div>
	<div class="row justify-content-center">
	        <div class="col-4"> One of two columns div>
	        <div class="col-4"> One of two columns div>
	div>
	<div class="row justify-content-end">
	        <div class="col-4"> One of two columns div>
	        <div class="col-4"> One of two columns div>
	div>
	<div class="row justify-content-around">
	        <div class="col-4"> One of two columns div>
	        <div class="col-4"> One of two columns div>
	div>
	<div class="row justify-content-between">
	        <div class="col-4"> One of two columns div>
	        <div class="col-4"> One of two columns div>
	div>
div>

5、列偏移

使用响应式的.offset-*栅格偏移方法。

样式效果:

BootStrap4:栅格系统_第4张图片

参考代码:

<div class=“container”>
     <div class="row">
          <div class="col-md-4 b">.col-md-4div>
          <div class="col-md-4 offset-md-4 ">
                    .col-md-4 .offset-md-4
           div>
     div>
     <div class="row">
          <div class="col-md-3 offset-md-3 ">
              .col-md-3 .offset-md-3
          div>
          <div class="col-md-3 offset-md-3 ">
              .col-md-3 .offset-md-3
          div>
     div>
     <div class="row">
          <div class="col-md-6 offset-md-3 ">
              .col-md-6 .offset-md-3
           div>
     div> 
div>

6、列嵌套

可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内

样式效果:

BootStrap4:栅格系统_第5张图片

源代码:

<div class=“container”>
       <div class="row">
             <div class="col-sm-9 ">
                  Level 1: .col-sm-9
                  <div class="row">
                         <div class="col-8 col-sm-6 ">
                               Level 2: .col-8 .col-sm-6
                         div>
                         <div class="col-4 col-sm-6 ">
                                Level 2: .col-4 .col-sm-6
                         div>
                 div>
             div>
      div>
div>

你可能感兴趣的:(BootStrap,前端,html,css)