부트스트랩 튜토리얼 편집 - 시작하기 + CSS 기본-JS 튜토리얼-php.cn

부트스트랩 튜토리얼 편집 - 시작하기 + CSS 기본

云罗郡主

풀어 주다： 2019-01-25 11:10:43

원래의

2881명이 탐색했습니다.

부트스트랩을 혼자 배울 때는 공식 홈페이지 문서를 따라 했습니다. 공식 웹사이트는 실제로 매우 명확하고 완벽하지만, 프론트엔드 초보자에게는 당분간 무시할 수 있는 산재한 지식 포인트가 여전히 많이 있습니다.

[관련 영상 추천: Bootstrap Tutorial]

그래서 여기에서는 "시작" 측면에서 도움이 되길 바라면서 지식 포인트를 간략하게 요약하겠습니다.

bootstrap Notes - 시작하기 + CSS 기본

1. 시작하기

1. 견적

공식 홈페이지에서 다운로드 받거나, bootCDN에서 제공하는 CDN 서비스를 이용하거나, 에서 제공하는 CDN 서비스를 통해 문서를 인용하세요. cdnjs

bootstrap.min.css 
bootstrap.min.js

로그인 후 복사

at bootstrap.min.js를 참조하기 전에 jquery

jquery.min.js

로그인 후 복사

CDN service

https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css
https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js

로그인 후 복사

를 인용해야 합니다. 당사 문서 참조 시 body 태그 내용 하단에 기재하는 것을 권장합니다

…
<bdoy>
…
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
…

로그인 후 복사

2. 모바일 우선

올바른 그리기와 터치 스크린을 보장하려면 확대/축소하려면 에 뷰포트 메타데이터 태그를 추가해야 합니다.

   <meta name="viewport" content="width=device-width, initial-scale=1">

로그인 후 복사

모바일 브라우저에서는 뷰포트의 메타 속성을 user-scalable=no로 설정하여 확대/축소를 비활성화할 수 있습니다.

   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

로그인 후 복사

위 코드의 구체적인 내용을 이해하려면 픽셀 이동 문제를 완전히 이해해야 합니다. MOOC.com에 접속하여 WEB 모바일 강좌를 살펴보는 것을 추천합니다

2. CSS 레이아웃

1. 레이아웃 컨테이너

콘텐츠 컨테이너, 너비가 고정됨(왼쪽과 오른쪽에 간격이 있음) )

<div class="container"></div>

로그인 후 복사

컨텐츠 컨테이너, 너비는 100%

<div class="container-fluid"></div>

로그인 후 복사

2. 그리드 시스템

그리드 시스템은 화면 너비를 평균 12개 부분으로 나누어 클래스에 숫자를 적으면 됩니다.

예를 들어

 class="col-md-12"

로그인 후 복사

다른 화면 크기의 경우 4가지 주요 범주, 즉

.col-lg-大屏幕             >1200px
.col-md-中等屏幕       992px~1200px
.col-sm-小屏幕         750px~992px
.col-xs-超小屏幕             <750px

로그인 후 복사

html:

   <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-12">好好学习天天向上</div>
            <div class="col-lg-3 col-md-6 col-sm-12">好好学习天天向上</div>
            <div class="col-lg-3 col-md-6 col-sm-12">好好学习天天向上</div>
            <div class="col-lg-3 col-md-6 col-sm-12">好好学习天天向上</div>
            
        </div>
    </div>

로그인 후 복사

css:

<style>
div[class^="col"]{
outline-offset: 1px;
outline:1px solid red;
}
</style>

로그인 후 복사

3으로 나뉩니다.

<mark></mark>    标记标签
<small></small>   小文本标签/副标题标签

로그인 후 복사

5. Table

기존 table>tr>td에 클래스 이름을 추가하여 bootstrap

기본 테이블:

   <kbd></kbd>  标记通过键盘输入的内容
    <code></code>  标记代码内容

로그인 후 복사

< b>.table, 다음 클래스 이름을 추가하면 해당 효과를 추가할 수 있습니다

 <table class="table"></table>

로그인 후 복사

상태 클래스 이러한 상태 클래스를 통해 행 또는 셀의 색상을 설정할 수 있습니다

.active 마우스를 눌렀을 때 설정되는 색상 행 또는 셀 위에 마우스를 올리면 성공 또는 긍정적인 작업을 식별합니다. 정보는 일반적인 프롬프트 정보 또는 작업을 식별합니다. 경고는 경고를 식별하거나 사용자 주의가 필요합니다. 위험은 잠재적인 부정적인 영향이 있는 위험이나 작업을 식별합니다.

6. , 배경 등)

Color in

.table-bordered   带边框的
.table-striped    带条纹的
.table-hover 鼠标悬停
.table-condensed 紧缩表格  单元格内的padding值减半

로그인 후 복사

7.Buttons

보통 우리는 양식 버튼을 작성할 때 입력 태그나 버튼 태그를 사용하고, 버튼을 모방할 때도 태그를 사용합니다.

     -default;  默认
      -primary;  首选项
      -success;  成功（一般用于表达积极向上）
      -info;     信息
      -warning;  警告
      -danger;   危险

로그인 후 복사

버튼에는 다음과 같은 스킨, 테마 또는 색상이 있습니다.

       <a class="btn btn-danger" href="">百度一下</a>
        <input class="btn btn-danger" type="button" value="按钮2">
        <button class="btn btn-danger">按钮3</button>

로그인 후 복사

8. 삼각형 기호

삼각형 기호를 사용하면 요소에 드롭다운 메뉴 기능이 있음을 나타낼 수 있습니다. 위쪽 팝업 메뉴의 삼각형 기호가 반전되어 있습니다.

 btn-default;  默认
  btn-primary;  首选项
  btn-success;  成功（一般用于表达积极向上）
  btn-info;  b   信息
  btn-warning;  警告
  btn-danger;   危险
  btn-link;     连接（a标签的方式）

로그인 후 복사

9. 닫기 버튼

종료를 상징하는 아이콘을 사용하여 모달박스, 알림박스를 사라지게 할 수 있습니다.