현재 AngularJS 부트 스트랩 지시문과 호환되는 부트 스트랩 3?

현재 AngularJS 부트 스트랩 지시문과 호환되는 부트 스트랩 3?

---

부트 스트랩 3 릴리스는 현재 AngularJS 부트 스트랩 지시문과 호환됩니까?

AngularJS와 함께 Bootstrap 2.3.1 지시문을 사용하고 싶습니다.

http://angular-ui.github.io/bootstrap/

Bootstrap 3.0.0 CSS 사용 :

https://github.com/twitter/bootstrap/tree/3.0.0-wip/

왜?

AngularJS 팀은 여전히 ​​v2.3.1에 대한 JS 지시문을 작업 중이며 v3.0.0을 따라 잡는 데 시간이 필요합니다. 지금 v3 CSS 그리드 구문을 사용하고 싶습니다.

https://github.com/angular-ui/bootstrap/issues/331

---

따라서 http://angular-ui.github.io/bootstrap/ 프로젝트 는 Bootstrap의 JavaScript에 의존 하지 않습니다 (포장하지 않고 필요하지 않음). 그것들은 가볍고 AngularJS 생태계에 잘 통합되도록 처음부터 작성된 기본 AngularJS 지시문입니다.

Bootstrap 프로젝트에 대한 유일한 준수는 Bootstrap의 마크 업 (HTML)과 CSS입니다.

"모든 지시문을 가져 와서 부트 스트랩 3.0과 함께 사용할 수 있습니까?"라는 질문을하면 대답은 "상황에 따라 다름"입니다. 실제로 Bootstrap 3.0이 마크 업과 해당 CSS 클래스를 변경하는지 여부와 결정 정도에 따라 다릅니다. 일부 컨트롤의 마크 업이 다른 컨트롤이 아닌 변경되었다고 가정합니다.

이제 http://angular-ui.github.io/bootstrap/ 의 아주 좋은 소식 은 대부분의 HTML 마크 업과 CSS 클래스가 별도의 AngularJS 템플릿에 캡슐화되어 있다는 것입니다. 실제로 이는 지시문의 JavaScript 코드를 잡고 부트 스트랩 3.0에 맞게 마크 업 (템플릿) 만 변경할 수 있음을 의미합니다.

모든 템플릿은 여기에 있습니다 : https://github.com/angular-ui/bootstrap/tree/master/template 그리고 그들을 찾아 보면 JavaScript를 엉망으로 만들지 않고 마크 업을 업데이트하는 것이 매우 간단하다는 아이디어를 얻을 수 있습니다. 이것이이 프로젝트의 디자인 목표 중 하나입니다.

간단히 시도해보고 Bootstrap 3.0의 CSS가 기존 지시문 및 템플릿과 어떻게 작동하는지 확인하는 것이 좋습니다. 문제가 발견되면 언제든지 템플릿을 Bootstrap 3.0으로 업데이트하고 프로젝트에 다시 기여할 수 있습니다!

---

Bootstrap 3.0 및 AngularUi 지시문과 관련된 대부분의 문제에 대한 수정 사항이 포함 된 풀 요청이 보류 중입니다.

https://github.com/angular-ui/bootstrap/pull/742

---

대안을 제시하기 위해 모바일 개발을 위해 Angular JS와 Boostrap 3을 통합하고자합니다. 저는 bootstrap.js 통합을 다른 방식으로 극복하려고 노력했습니다.

구성 요소별로 bootstrap.js 동작을 정확하게 재현하려고 시도하는 대신 기본적으로 이벤트를 통해 서로 통신하는 두 가지 범용 지시문을 만들어 두 개 이상의 DOM 노드의 활성 / 비활성 상태를 동기화했습니다. state trough 클래스를 반영하면 거의 모든 기본 bootstrap.js 구성 요소 상호 작용을 재현 할 수 있습니다.

따라서 가장 일반적인 응용 프로그램의 경우 거의 모든 boostrap 3 기능을 얻으려면 bootstap 3 css와이 몇 줄의 j 만 있으면됩니다.

여기에서 코드를 가져올 수 있으며 프로젝트 외부에서 작동하며 필요에 맞게 조정할 수 있습니다. https://github.com/mcasimir/mobile-angular-ui/blob/master/src/coffee/directives/toggle . 커피 .

Coffeescript이지만 js2coffee.org를 통해 쉽게 js로 번역 할 수 있습니다.

http://mobileangularui.com/#toc6 에서 문서를 읽을 수도 있습니다 .

다음은 작동 방식의 기본을 보여주는 간단한 예입니다.

<p toggleable id="lightbulb" active-class="text-primary" class="text-default">
  <i class="fa fa-lightbulb-o"></i>
</p>

<div class="btn-group justified nav-tabs">
  <a toggle="toggle" target="lightbulb" active-class="active" class="btn btn-default" href>
      Toggle
  </a>
  <a toggle="on" target="lightbulb" class="btn btn-default" href>
      Turn On
  </a>
  <a toggle="off" target="lightbulb" class="btn btn-default" href>
      Turn Off
  </a>        
</div>

그리고 이것이 탭 구성 요소를 만드는 데 사용할 수있는 방법입니다.

<ul class="nav nav-tabs">
<li><a href="#Tab1" toggle="on" parent-active-class="active">Tab 1</a></li>
  <li><a href="#Tab2" toggle="on" parent-active-class="active">Tab 2</a></li>
  <li><a href="#Tab3" toggle="on" parent-active-class="active">Tab 3</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane" toggleable active-class="active" default="active" id="Tab1" exclusion-group="myTabs">

    <h3 class="page-header">Tab 1</h3>
    <p><!-- ... --></p>
  </div>

  <div class="tab-pane" toggleable active-class="active" id="Tab2" exclusion-group="myTabs">
    <h3 class="page-header">Tab 2</h3>
    <p><!-- ... --></p>
  </div>

  <div class="tab-pane" toggleable active-class="active" id="Tab3" exclusion-group="myTabs">
    <h3 class="page-header">Tab 3</h3>
    <p><!-- ... --></p>
  </div>
</div>

또한 다른 노드에서 동일한 탭을 제어 할 수도 있습니다.

<div class="btn-group justified nav-tabs">
  <a class="btn btn-default" href="#Tab1" toggle="on" active-class="active">Tab 1
  </a>

  <a class="btn btn-default" href="#Tab2" toggle="on" active-class="active">Tab 2
  </a>

  <a class="btn btn-default" href="#Tab3" toggle="on" active-class="active">Tab 3
  </a>

</div>

Don't know if this can fit your needs but this way you can create at least: tabs, accordions, collapsibles, modals and dropdowns without the need of a dedicated library. Also note that it will work either with bootstrap 2 and 3 since it not depends on bootstrap markup at all.

ReferenceURL : https://stackoverflow.com/questions/16327846/bootstrap-3-compatible-with-current-angularjs-bootstrap-directives