>웹 프론트엔드 >JS 튜토리얼 >부트스트랩이란 무엇입니까? BootStrap의 구조와 구성 소개

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

不言
不言앞으로
2018-10-13 15:51:163374검색

이 기사에서는 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)

    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
        <!-- Bootstrap -->
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

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

 <table class="table">
   
 <th scope="row">1</th>

(3) Bordered table

 <table class="table-bordered">

(4) Form

<form>
    <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>

(5) Button

  <button type="submit" class="btn btn-default">Submit</button>
  <button type="submit" class="btn btn-primary">Transfer cash</button>

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

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

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

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


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

성명:
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제