简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

Bootstarp_javascript 기술에서 CSS를 사용하는 방법

WBOY
풀어 주다： 2016-05-16 15:15:11
원래의
1253명이 탐색했습니다.

Bootstrap은 일부 HTML5 요소와 CSS 속성을 사용하므로 HTML5 문서 유형을 사용해야 합니다. 

<!DOCTYPE html>
<html lang="zh-CN">
 ...
</html>
로그인 후 복사

Bootstrap에서 개발한 웹사이트를 모바일 친화적으로 만들고 적절한 그리기 및 터치스크린 크기 조정을 보장하려면 아래와 같이 웹페이지 헤드에 뷰포트 메타 태그를 추가해야 합니다. 

<meta name="viewport" content="width=device-width, //视口宽度为设备宽度
          initial-scale=1.0, //缩放程度
          maximum-scale=1.0, //最大缩放级别（可选）
          user-scalable=no">//禁止页面缩放（可选）
로그인 후 복사

Bootstrap은 Normalize를 사용하여 브라우저 간 일관성을 설정합니다. Normalize.css는 HTML 요소의 기본 스타일에 더 나은 브라우저 간 일관성을 제공하는 작은 CSS 파일입니다.

레이아웃 정보

Bootstrap은 화면이나 뷰포트 크기가 증가함에 따라 자동으로 최대 12개의 열로 분할되는 반응형 모바일 우선 유동 그리드 시스템을 제공합니다.

img-반응형은 img 요소에 사용됩니다.

페이지의 콘텐츠를 래핑하는 데 사용되는 컨테이너 요소

  • 행은 컨테이너에 배치되어야 하며 수평 열 그룹을 만드는 데 사용됩니다.
  • .row 및 .col-xs-4와 같은 사전 정의된 그리드 클래스를 사용하여 그리드 레이아웃을 빠르게 생성할 수 있습니다.

  • 행과 열은 서로 중첩될 수 있으며 중첩 후 조정은 장치 너비가 아닌 상위 요소를 기반으로 합니다
  • 3개의 동일한 열을 만들려면 3개의 col-xs-4를 사용하거나 12개의 열에 12개의 col-xs-1을 사용하세요. 
<div class="container">
 <div class="row">
  <div class="col-xs-6 col-md-2 col-md-offset-1"></div>
  <div class="col-xs-6 col-md-3"></div>
  <div class="col-xs-6 col-md-3"></div>
  <div class="col-xs-6 col-md-3"></div>
 </div>
 <div class="row">...</div>
</div>
<div class="container">.... 
<!--以上代码在手机上就是两行两列，在电脑上是一行四列，其中第一列前面有空白，比其它列宽度小三分之一-->
//可使用.col-md-push-* 和 .col-md-pull-* 这种类设定显示，col-md-push-6按照我个人的理解，是在左面浮动了6列，然后再插入元素，col-md-pull-3则是在右边浮动了3列，然后从右往左插入元素
로그인 후 복사
  • 미디어 쿼리는 매우 멋진 "조건부 CSS 규칙"입니다. 특정 특정 조건에 따라 일부 CSS에서만 작동합니다. 해당 조건이 충족되면 해당 스타일이 적용됩니다.

@media (최소 너비: @screen-sm-min) 및 (최대 너비: @screen-sm-max) { ... }
//최소 너비: @screen-sm-min을 사용하는 모든 장치의 경우 화면 너비가 @screen-sm-max보다 작으면 일부 처리가 수행됩니다.

조판에 대하여

  • 텍스트 소개
<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>灰
<p class="text-primary">本行内容带有一个 primary class</p>蓝
<p class="text-success">本行内容带有一个 success class</p>绿
<p class="text-info">本行内容带有一个 info class</p>深蓝
<p class="text-warning">本行内容带有一个 warning class</p>黄
<p class="text-danger">本行内容带有一个 danger class</p>红
로그인 후 복사

Bootstrap은 요소의 스타일을 텍스트 하단에 표시되는 점선 테두리로 정의하며, 해당 요소 위에 마우스를 올리면 전체 텍스트가 나타납니다(< 약어> 제목 속성). 텍스트의 글꼴 크기를 더 작게 하려면 에 .initialism을 추가하세요. 

<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
로그인 후 복사

  • <주소> 태그를 사용하면 웹페이지에 연락처 정보를 표시할 수 있습니다.
  • 태그를 인용문으로 사용하세요
<blockquote>这是一个带有源标题的引用。<small>Someone famous in Source Title</small></blockquote>
로그인 후 복사
  • list-unstyled는 스타일이 지정되지 않은 목록 ul에 사용되고 list-inline은 가로 목록 ul에 사용됩니다
  • 사전 스크롤 가능을 통해 사전 스크롤 가능
  • 코드를 인라인으로 표시하고 
    는 여러 줄의 코드를 표시합니다</strong></span><br />
  </li>
</ul>
<p><strong>양식에 대하여</strong></p>
<p style="text-align: center"><img id="theimg" alt="" onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201602/201621793115393.png&#63;201611793123" /></p>
<p style="text-align: center"><img id="theimg" alt="" onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201602/201621793141588.png&#63;201611793156" /></p>
<p>모든 .table을 .table 반응형 클래스로 래핑하면 작은 기기(768px 미만)에 맞게 테이블을 가로로 스크롤할 수 있습니다. 너비가 768px보다 큰 대형 장치에서 볼 때 아무런 차이가 없습니다. <br />
</p>
<div class="jb51code">
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;">
<div class="table-responsive">
 <table class="table">
  <caption>响应式表格布局</caption>
  <thead>
   <tr>
   <th>产品</th>
   <th>付款日期</th>
   <th>状态</th>
   </tr>
  </thead>
  <tbody>
   <tr>
   <td>产品1</td>
   <td>23/11/2013</td>
   <td>待发货</td>
   </tr>
  </tbody>
 </table>
</div>
    로그인 후 복사

양식에 대하여

  • form에 role="form" 속성을 추가하면 Bootstrap의 기본 폼 구조가 적용됩니다. 이때 기본값은 세로 형식입니다
  • 레이블과 컨트롤을 .form-group 클래스를 사용하여
    에 넣습니다. 이는 최적의 간격을 확보하는 데 필요합니다.
  • 모든 텍스트 요소 ,