부트스트랩 기본 학습_자바스크립트 기술

부트스트랩은 그리드 구조를 기반으로 한 프런트엔드 구조 프레임워크입니다(물론 JS, JQuery도 포함). 미디어 쿼리를 기반으로 콘텐츠 프레임워크를 빠르게 구축할 수 있다는 장점이 있습니다. 물론, 새 버전은 더 이상 IE6을 지원하지 않으며, 결국 IE8에 대한 지원도 매우 제한적입니다. HTML5를 잘 지원하지 않습니다.(솔직히 저 자신은 지원하지 않습니다.) 저는 IE6~8을 좋아하지 않습니다. 저 같은 초보 플레이어에게는 호환성이 정말 어려울 때도 있습니다. 프로젝트에도 사용해야 하는데, 실수한 적이 있나요? 그냥 온라인으로 확인하세요. 그래도 방법을 알아야 합니다.

더 이상 고민하지 말고 이 기간 동안의 BS 노트를 요약해 보겠습니다!

1. 구조적 내용 측면에서 BS의 구조적 내용 제어는 기본적으로 클래스에 의해 제어됩니다.

<div class="container">
  <div class="row">
   <div class="col-md-4 col-xs-6">
     这一块div的类名中，是由col-md-4,col-xs-6这两个类名来控制他的框架宽度；其中col代表是栅格,md代表客户端显示器的宽度为pc中屏，同样的xs则代表客户端显示器为超小屏，也就是手机屏；4，6就代表了栅格的长度，意思就是在中屏显示器下宽度为4个栅格，在手机端宽度为6个栅格 ，一般情况下把把一整块div最多可以划成12个栅格，所以他的兄弟div在中屏下则是8个栅格！ 
   </div>
   <div class="col-md-8  text-muted">这一块div的类名中，抛去col-md-8不说，来说说text-muted.这个类则是控制这个div下的内容字体颜色的，当你把BS的css下载到本地后，你在css我文件中搜索text-muted，就会看到他的定义只有颜色，和他在一起的其他类名就分别定义了不同的颜色 </div>
  </div>
</div>

2. 위에서 구조를 언급했는데, 페이지의 특정 구성 요소에 대해 먼저 이야기해 보겠습니다. 원래 우리가 직접 만든 탐색은 기본 인라인 ul로 구성되어 있습니다(다음 CSS를 구현할 수 있음). 학사) ,

<ul class="list-inline">
  <li>W3cplus</li>
  <li>Blog</li>
  <li>CSS3</li>
  <li>jQuery</li>
  <li>PHP</li>
</ul>

하지만 BS에는 이를 구현하기 위한 nav 클래스가 있지만 nav-pills 및 nav-tabs와 같은 페이지 효과를 나타내려면 nav 클래스를 다른 클래스와 결합해야 합니다. 그것은 클래스에 있습니다. 이름에 nav-stacked

를 추가하세요

<ul class="nav nav-pill">
  <li><a href="##">Home</a></li>
  <li><a href="##">CSS3</a></li>
   <li><a href="##">Sass</a></li>
   <li><a href="##">jQuery</a></li>
   <li><a href="##">Responsive</a></li>
</ul>

3. 탐색 모음에 대해 이야기한 후 드롭다운 메뉴에 대해 이야기해 보겠습니다. BS의 드롭다운 메뉴는 함께 제공되는 js 파일에 의존해야 하며 자체 js도 JQuery에 의존합니다. 두 개의 파일이 필요합니다. 이 드롭다운 메뉴의 코드가 약간 복잡하다는 점을 설명할 가치가 있습니다. 버튼의 data-toggle="dropdown"은 외부 div 클래스 이름과 동일해야 합니다.

<div class="dropdown">
 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  下拉菜单
  <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
 </ul>
</div>

4. 이제 양식에 대해 이야기할 때가 된 것 같습니다. Bootstrap 프레임워크에서는 'form-control' 클래스 이름이 사용자 정의됩니다. 즉, 이러한 요소가 "form-control"이라는 클래스 이름을 사용하면 일부 디자인 사용자 정의 효과를 얻으십시오.

<form role="form">
 <div class="form-group">
  <label for="exampleInputEmail1">邮箱：</label>
  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
 </div>
 <div class="form-group">
  <label for="exampleInputPassword1">密码</label>
  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
 </div>
 <div class="checkbox">
  <label>
   <input type="checkbox"> 记住密码
  </label>
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
</form>

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다