부트스트랩이란 무엇입니까? BootStrap의 구조와 구성 소개

이 기사에서는 BootStrap이 무엇인지 설명합니다. BootStrap은 무엇으로 구성되어 있나요? 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 소개

Bootstrap은 HTML, CSS 및 JAVASCRIPT를 기반으로 하는 프런트 엔드 프레임워크로, CSS 스타일 세트와 해당 jquery 코드가 미리 정의되어 있습니다. 가장 큰 특징은 반응형 레이아웃을 사용한다는 것입니다(여러 터미널과 호환 가능). Media Query(css3 Media Query)를 채택했기 때문입니다. (관련 무료 영상 추천: bootstrap tutorial)

II. BootStrap 구성

1.12 그리드 시스템: 화면을 12개의 열로 나누고 행을 사용하여 요소를 구성한 후 배치합니다. content in 열 내

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

2. 기본 레이아웃 구성 요소: bootstrap

에서 제공하는 다양한 기본 레이아웃 구성 요소 (1)

    nbsp;html>
    
      
        <meta>
        <meta>
        <meta>
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <!-- Bootstrap -->
        <link>

소개 (2) 기본 스타일 테이블(tr은 행, td는 행의 열) , th는 제목 열이며 td)

     

(3) Bordered table

1

(4) Form

    

    Password          

(5) Button

  <button>Submit</button>
  <button>Transfer cash</button>

3.jquery: Bootstrap의 모든 JavaScript 플러그인은 종속됩니다. Jquery에서(jquery 라이브러리 소개 참고)

4.css 구성 요소: bootstrap은 우리를 위해 많은 CSS 구성 요소를 미리 구현했습니다.

5.javascript 플러그인: bootstrap은 일부 js 플러그인을 제공합니다

6 반응형 디자인: 호환 가능 여러 터미널

위 내용은 부트스트랩이란 무엇입니까? BootStrap의 구조와 구성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!