BootStrap -2

kh0520·2022년 5월 30일

1) 학습내용

bootstrap 연습

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">

bootstrap 적용코드

<body>
    <header class="bg-primary text-white text-center p-5">
        <h1>My First Bootstrap 5 page</h1>
        <p>Resize this responsive page to see the effect!</p>
    </header>
   
    <nav class="navbar bg-dark navbar-dark navbar-expand-sm">
        <div class="container-fluid"> <!-- width:100 %-->
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link" href="#">Active</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                <li class="nav-item"><a class="nav-link Disabled" >Disabled</a></li>
            </ul>

        </div>

    </nav>

용어정리

navbar-expand-sm : sm에서 수직 정렬
"container-fluid" : width:100 %

결과

Section 왼쪽 부분

<section class="container mt-5">
        <div class="row">
            <aside class="col-sm-4">
                <h2>About Me</h2>
                <p class="h5">photo of me: </p>
                <div class="fakeimg">Fake image</div>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit nobis tempore nulla, a accusantium magnam vero officiis adipisci excepturi, aliquid ipsa, error fugiat maiores ipsum est maxime possimus praesentium commodi?</p>
                <h3>Some Links</h3>
               
                <ul class=" nav flex-column">
                    <li class="nav-item"><a class="nav-link" href="#">Active</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">link</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">link</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Disabled</a></li>
                </ul>
                <!-- 미디어쿼리는 지정된 중단점보다 큰화면 너비에 영향을 준다 -->
                <hr class="d-sm-none">
            </aside>

용어 정리

nav: 간단한 수평메뉴
flex-column: 항상세로메뉴
nav-pills: active에 테두리 넣기

결과

section 오른쪽부분

 <article class="col-sm-8">
                    <h2>title heading</h2>
                    <!-- <h5>Title description dec7, 2022 </h5> -->
                    <p class="h5">Title description dec7, 2022 </p>
                    <div class="fakeimg">Fake Image</div>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia at, ipsum totam voluptates harum praesentium excepturi. Distinctio, magni sint soluta repudiandae sapiente nam, labore, blanditiis veniam dolorum accusantium delectus harum?</p>
                    
                    <h2>title heading</h2>
                    <!-- <h5>Title description dec7, 2022 </h5> -->
                    <p class="h5">Title description dec7, 2022 </p>
                    <div class="fakeimg">Fake Image</div>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia at, ipsum totam voluptates harum praesentium excepturi. Distinctio, magni sint soluta repudiandae sapiente nam, labore, blanditiis veniam dolorum accusantium delectus harum?</p>
            
            </article>

 <!-- <h5>Title description dec7, 2022 </h5> --> =  
 <p class="h5">Title description dec7, 2022 </p>

둘중 아무거나 써도 무방

결과

<footer class="bg-dark text-white d-flex justify-content-between 
            align-items-center p-4 mt-5 ">
                <p>footer</p>
                <div>
                    <i class="ms-3 bi bi-twitch"></i>
                    <i class="ms-3 bi bi-facebook"></i>
                    <i class="ms-3 bi bi-instagram"></i>
                    <i class="ms-3 bi bi-google"></i>
                </div>
            </footer>