Oracle/Html_CSS_JAVAScript

부트스트랩 - 클래스를 넣으면 스타일이 적용된다

unemo 2020. 12. 22. 12:37
반응형

서블릿을 써서 서버랑 연동하는걸 할거임

 

화면디자인,레이아웃 관련

다배우고 b4를 보기 (좀 더 업그레이드 된것)

 

스타일을 주는것

 

부트스트랩에서 클래스를 많이 정의해놓음 그걸 설정하면 그트아리로 쫙 나옴

css로 ul을 세로에서 가로로 둔것도 부트스트랩에서 클래스 지정해주면 알아서 다 된다

 

www.w3schools.com/bootstrap/default.asp

 

Bootstrap 3 Tutorial

Bootstrap 3 Tutorial Try it Yourself Examples This Bootstrap tutorial contains hundreds of Bootstrap examples. With our online editor, you can edit the code, and click on a button to view the result. Bootstrap Example

 

 

www.w3schools.com

따로 css를 준게 아닌데 이런식으로 나온다는거

 

 

jquery.min.js 밑에 (부트스트랩이 제이쿼리의 요소 사용하기때문에 반드시순서 제이쿼리다음에 부트스트랩)

bootstrap.min.js 를 넣으면 됨

그리고 메타태그 이용, link도 쓰고...

 

부트스트랩은 반응형 디자인을쉽게 만들수 잇는 기능을 제공합니다.

 

getbootstrap.comgetbootstrap.com/ 에서 다운로드받을수있다.

 

Bootstrap

The most popular HTML, CSS, and JS library in the world.

getbootstrap.com

컨테이너라는 표현이 나옴 

 

div를 만들고 div의 클래스나 id나 컨테이너일때

 

부트스트랩에서는 콘텐츠를 감싸기 위한 컨테이너가 필요

그 컨테이너 안에서 쪼개고쪼개고쪼개서 쓰는거임

 

컨테이너는 두가지가잇음

.container :반응형 고정너비컨테이너

.container-fluid : 브라우저의 너비를 다 쓰는것

 

body밑에 div주고 그 클래스를 컨테이너라고 주면 된다.

 

부트스트랩 그리드(표)

 

컨테이너로 일단 박스를 만들었음. (우리가 사용할 영역)

전체를 최대 12열로 나누고 거기에 맞ㅇ춰 디자인하는것

www.w3schools.com/bootstrap/bootstrap_grid_system.asp

 

Bootstrap Grid System

Bootstrap Grid System Bootstrap Grid System Bootstrap's grid system allows up to 12 columns across the page. If you do not want to use all 12 column individually, you can group the columns together to create wider columns: span 1 span 1 span 1 span 1 span

www.w3schools.com

 

 

-그리드 클래스

col 컬럼 sm스몰사이즈로 4개 차지해줘 라는 뜻임

부트스트랩 기본구조는 컨테이너를 쓴다는거랑 그리드로 나눠서 슨다는거

부트스트랩의 typography ...

 

text-muted, text-primary  등의 특징도 있다

 

bg-danger 이런것도 (배경색)

 

small : 부모에 비해 85% wkrdmsrjt

 

 

클래스는 여러개 적용가능 띄어쓰기하면 됨

 

.table 

원래 thead (제목부분)이랑 tbody(몸통부분)도 들어가있다.

 

 

요구사항 정리를 하면서 안에 기능사항같은게 들어감. <이걸바탕으로 디자인을 함
개발자가 디자인을 하는데 html로 혹은 종이에다가 그려서 고객과 다시얘기, ok되면 나온디자인을
디자이너나 퍼블리셔에게 줌 퍼블리셔가 html만들어서 개발자에게 줌
개발자는 html에서 내가 써야하는 부분만 카피해서 jsp로 만들어서 이걸로 개발하는거임
jsp는 html이랑 똑같음 위에 태그만 하나 더 들어가고.. jsp는 기본html에 java코딩이들어갈수있는 것
실제 개발은 jsp로 하게 된다.

암튼 퍼블리셔는 부트스트랩을 쓰기떄문에 thead랑 tbody를 쓴 형태로 준다는거...

 

Glyphicon

: 이모티콘같은거

버튼이 아니고 a태그인데
이렇게 버튼처럼 생김

 

dropdown

d

<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>

버튼이 ul과 같은 레벨에 들어가잇는데, ul은 안보이고 버튼을 눌렀을때 쫙 나옴 dropdown이 이렇게 한거임

 

span ~ 부분은 example 옆에 화살표를 나타내기 위함임

 

ListGroup

꼭 div처럼 생겼다

www.w3schools.com/bootstrap/bootstrap_list_groups.asp

 

Bootstrap List Groups

Bootstrap List Groups Basic List Groups The most basic list group is an unordered list with list items: First item Second item Third item To create a basic list group, use an element with class .list-group, and elements with class .list-group-item: Example

www.w3schools.com

메뉴를 만들때도 list를 옆으로 정렬 (css는 display이용)해서 메뉴를 마니 만들음. header밑, 왼쪽 네비부분도 list로 많이 만든다.

 

input이랑 input2 도 중프 위해서 챙겨보기

 

이제 해보자

 

 

 

 

이부분에 

그대로 카피

일단은 CDN으로 썼음 (다운로드 한거 소용x )

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> 
<!--   CDN방식 (인터넷 url방식으로 넣은것), 인터넷연결이되어있어야함 -->
  <script src="../../js/jquery-3.5.1.js"></script>
<!--   로컬형식으로 넣은것 -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
    /* Remove the navbar's default margin-bottom and rounded borders */ 
    .navbar {
      margin-bottom: 0;
      border-radius: 0;
    }
    
    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {height: 450px}
    
    /* Set gray background color and 100% height */
    .sidenav {
      padding-top: 20px;
      background-color: #f1f1f1;
      height: 100%;
    }
    
    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }
    
    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height:auto;} 
    }
  </style>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container-fluid text-center">    
  <div class="row content">
    <div class="col-sm-2 sidenav">
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
    </div>
    <div class="col-sm-8 text-left"> 
      <h1>Welcome</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <hr>
      <h3>Test</h3>
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-2 sidenav">
      <div class="well">
        <p>ADS</p>
      </div>
      <div class="well">
        <p>ADS</p>
      </div>
    </div>
  </div>
</div>

<footer class="container-fluid text-center">
  <p>Footer Text</p>
</footer>

</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

반응형
저작자표시

'Oracle > Html_CSS_JAVAScript' 카테고리의 다른 글

JSON , AJAX  (0) 2020.12.17
jquery  (0) 2020.12.14
jquery  (0) 2020.12.11
jquery  (0) 2020.12.10
jQuery  (0) 2020.12.08

'Oracle/Html_CSS_JAVAScript'의 다른글

  • 현재글부트스트랩 - 클래스를 넣으면 스타일이 적용된다

관련글

댓글

티스토리툴바