خرید بک لینک

درباره سایت

CodingForums

آخرین مطالب

امکانات وب

What is this mean "div[class^="col"]" stated at . Thanks

Code:
<!DOCTYPE html>
<title>My Example</title>

<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<style>
body {
padding-top: 1em;
}
</style>

<!-- Styles 2 (so that we can see the grid) -->
<style>
.bs-example  div[class^="col"]{
    border: 2px solid white;
    background: #666;
    text-align: center;
    padding-top: 8px;
    padding-bottom: 8px;
    }
</style>

<div class="bs-example">
<div class="container">
    <!-- Bootstrap Grid -->
    <div class="row">
      <div class="col-sm-1">.col-sm-1</div>
      <div class="col-sm-1">.col-sm-1</div>
      <div class="col-sm-1">.col-sm-1</div>
      <div class="col-sm-1">.col-sm-1</div>
      <div class="col-sm-1">.col-sm-1</div>
      <div class="col-sm-1">.col-sm-1</div>
      <div class="col-sm-1">.col-sm-1</div>
      <div class="col-sm-1">.col-sm-1</div>
      <div class="col-sm-1">.col-sm-1</div>
      <div class="col-sm-1">.col-sm-1</div>
      <div class="col-sm-1">.col-sm-1</div>
      <div class="col-sm-1">.col-sm-1</div>
    </div>
    <div class="row">
      <div class="col-sm-2">.col-sm-2</div>
      <div class="col-sm-3">.col-sm-3</div>
      <div class="col-sm-7">.col-sm-7</div>
    </div>
    <div class="row">
      <div class="col-sm-4">.col-sm-4</div>
      <div class="col-sm-4">.col-sm-4</div>
      <div class="col-sm-4">.col-sm-4</div>
    </div>
    <div class="row">
      <div class="col-sm-5">.col-sm-5</div>
      <div class="col-sm-7">.col-sm-7</div>
    </div>
    <div class="row">
      <div class="col-sm-6">.col-sm-6</div>
      <div class="col-sm-6">.col-sm-6</div>
    </div>
    <div class="row">
      <div class="col-sm-12">.col-sm-12</div>
    </div>
</div>

</div>

<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

برچسب: نویسنده: آیلین رضوانی تاريخ: سه شنبه 12 دی 1396 ساعت: 13:37

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه