07_반응형 웹(5) : bootstrap

#bootstrap.html

 

 

참고사이트

https://www.w3schools.com

 

EXAMPLES  →  BOOTETRAP → Learn Bootstrap 4 → Try it Yourself

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

---

 

 

 

버튼 색상 변경 

    <button>클릭</button>
    <button class="btn">클릭</button>
    <button class="btn btn-primary">클릭</button>
    <button class="btn btn-outline-primary">클릭</button>
    <button class="btn btn-success">클릭</button>
    <button class="btn btn-warning">클릭</button>
    <button class="btn btn-info">클릭</button>
    <button class="btn btn-danger">클릭</button>

---

 

 

 

버튼 크기 변경

    <button class="btn btn-primary btn-sm">클릭</button>
    <button class="btn btn-primary">클릭</button>
    <button class="btn btn-primary btn-lg">클릭</button>

 

 

 

테이블

    <table class="table">
        <tr>
            <th>111</th>
            <th>222</th>
            <th>333</th>
        </tr>
        <tr>
            <th>111</th>
            <th>222</th>
            <th>333</th>
        </tr>
        <tr>
            <th>111</th>
            <th>222</th>
            <th>333</th>
        </tr>
    </table>

    <table class="table table-striped">
        <tr>
            <th>111</th>
            <th>222</th>
            <th>333</th>
        </tr>
        <tr>
            <th>111</th>
            <th>222</th>
            <th>333</th>
        </tr>
        <tr>
            <th>111</th>
            <th>222</th>
            <th>333</th>
        </tr>
    </table>