虛線弧形邊框

#rrr {
    border: 1px dashed #003366;    ←有邊框  粗細  虛線   顏色
    border-radius: 30px;    ←邊框的圓角  圓角的弧度 
}

圖片導覽

<div id="carouselExampleIndicators1" class="carousel slide" data-ride="carousel" style="background-color: grey">
                <ol class="carousel-indicators">
                  <li data-target="#carouselExampleIndicators1" data-slide-to="0" class="active"></li>
                  <li data-target="#carouselExampleIndicators1" data-slide-to="1"></li>
                  <li data-target="#carouselExampleIndicators1" data-slide-to="2"></li>
              </ol>
                <div class="carousel-inner" role="listbox">
                  <div class="carousel-item active"> <img class="d-block mx-auto" src="images/Carousel_Placeholder.png" alt="First slide">
                    <div class="carousel-caption">
                      <h5>First slide Heading</h5>
                      <p>First slide Caption</p>
                  </div>
                </div>
                  <div class="carousel-item"> <img class="d-block mx-auto" src="images/Carousel_Placeholder.png" alt="Second slide">
                    <div class="carousel-caption">
                      <h5>Second slide Heading</h5>
                      <p>Second slide Caption</p>
                  </div>
                </div>
                  <div class="carousel-item"> <img class="d-block mx-auto" src="images/Carousel_Placeholder.png" alt="Third slide">
                    <div class="carousel-caption">
                      <h5>Third slide Heading</h5>
                      <p>Third slide Caption</p>
                  </div>
                </div>
              </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
          </div>


Bootstrap12格排版範例

<div class="container-fluid">
        <div class="row">
                    <div class="col-md-1">Content goes here</div>
          <div class="col-md-2">Content goes here</div>
          <div class="col-md-6">Content goes here</div>
                    <div class="col-md-3">Content goes here</div>
          
              <div class="row">
            <div class="col-md-6">Content goes here</div>
            <div class="col-md-6">Content goes here</div>
</div>

排版技巧（漂浮）
float: left;   靠左飄
float: right; 靠右飄
clear: left;  只去除掉之前的左漂浮（其他設定還在）
clear: right; 只去除掉之前的右漂浮（其他設定還在）
clear: both;  去除掉之前所有的漂浮

用法：

<style>    
.demo_01 {            
寫在這裡面  
 } 

#demo_02 {            
寫在這裡面  
 } 
</style>