BootStrap 연구 노트: BootStrap의 공통 구성 요소 소개

이 기사에서는 BootStrap 연구 노트를 기반으로 BootStrap의 일반적인 구성 요소를 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 부트스트랩 관련 비디오 튜토리얼을 더 배우고 얻으려면 부트스트랩 튜토리얼을 방문하세요!

1. 아이콘:

    <h3>图标</h3>   
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>

2. 버튼:

    <h3>按钮</h3>
    <button>按钮</button>
    <button>primary</button>
    <button>success</button>
    <button>info</button>
    <button>warning</button>
    <button>danger</button>

3. 버튼 크기:

    <h3>按钮尺寸</h3>
    <button>按钮</button>
    <button>primary</button>
    <button>success</button>
    <button>info</button>

4. 드롭다운 메뉴:

    <h3>把图标显示在按钮里</h3>
    <button><span></span>  按钮</button>

상호작용: 각 메뉴의 클릭 이벤트를 모니터링하고

<p>
        <button>
            <span>菜单一</span>
            <span></span>
        </button>
        </p>

            
• 菜单一
            
• 菜单二
            
• 菜单三
        

    

6. 입력 상자:

        $('.dropdown-item').click(function () {
            $('#dropdown-title').text($(this).text());
        });

7. 탐색 표시줄:

    <h3>输入框</h3>
    <p>
      <span></span>
      <input>
    </p>

    <p>
      <span></span>
      <input>
    </p>

8.

    <h3>导航栏</h3>
    <nav>
        <p>
          </p>
<ul>
            <li><a>Home</a></li>
            <li><a>About</a></li>
            <li><a>Contact</a></li>
            <li>
              <a>Dropdown <span></span></a>
              <ul>
                <li><a>Action</a></li>
                <li><a>Another action</a></li>
                <li>
                <li>Nav header</li>
                <li><a>Separated link</a></li>
              </ul>
            </li>
          </ul>
        <!--/.nav-collapse -->
      
    </nav>

9 , 경고 상자:

    <h3>表单</h3>
    

    

             <input>     

    

             <input>     

    

      File input       <input>       

Example block-level help text here.

         

               <input> Check me out            

    Submit   

10. 진행률 표시줄:

    <h3>警告框</h3>
    <p>
       <button><span>×</span></button>
       <strong>Warning!</strong> Better check yourself, you're not looking too good.
    </p>
    <p>
        <a>success!</a>
    </p>
    <p>
        <a>info!</a>
    </p>
    <p>
        <a>warning!</a>
    </p>
    <p>
        <a>danger!</a>
    </p>

11. 오른쪽으로 정렬

일반적으로 오른쪽으로 부동하는 기능을 구현하려면 float:right를 사용합니다. 여기에는 float를 지우고 오른쪽 여백, 위쪽 및 아래쪽 여백 등을 조정하는 작업이 포함됩니다. 물론 부트스트랩에서 해당 방법을 사용해야 합니다. 문제를 해결하려면 pull-right를 추가하세요.

    <h3>进度条</h3>
    <p>
      </p><p>
        70%
      </p>
    

첫 번째 줄 위의 두 번째 줄과 동일한 수평선에 있어야 하므로 첫 번째 줄에서는

등을 사용할 수 없습니다. 이 요소에는 자체 줄 바꿈 기능이 있기 때문입니다.

12. 탭을 사용하면 페이지에 표시된 콘텐츠를 쉽게 전환할 수 있습니다. 부트스트랩 탭을 사용하는 방법은 매우 간단합니다.

<span>item1</span>
<p>item2</p>

js에서는 탭 전환을 쉽게 캡처하고 다음과 같은 해당 변경 사항을 적용할 수 있습니다. 두 번째 페이지에서 일부 데이터를 로드하면 두 번째 페이지로 전환하여 로드할 때까지 기다립니다.

        
• tab1
        
• tab2
        
• tab3
    

    这是宝贝管理页面     

        

            

这是tab1

                 

            

这是tab2

                 

            

这是tab3

             13.bootstrap-table

ajax를 통해 json 데이터를 요청하고 테이블을 생성할 수 있는 플러그인

프로젝트 주소 ：

https://github.com/wenzhixin/bootstrap-table

14. 알림 메시지 구성요소

다운로드 주소:

https://github.com/CodeSeven/toastr

< ;2> ;문서:

http://www.ithao123.cn/content-2414918.html

소개:

다운로드한 파일에서 빌드 폴더를 찾아 그 안에 toastr.min.js와 toastr을 소개하세요. .css

사용법:

이 프롬프트 메시지는 기본적으로 브라우저의 오른쪽 상단에 표시됩니다. 초기화 시 상단 중앙 표시로 변경할 수 있습니다.

        $('a[data-toggle="tab"]').on('shown.bs.tab',function (e) {
            var activeTab = $(e.target).text();
            alert(activeTab);
        });

위치 표시 설정은 다음과 같습니다. 다음 옵션을 사용하세요.

        toastr.options.positionClass = 'toast-top-center';//显示位置

표시해야 할 경우 다음과 같이 호출하세요.

toast-top-right
toast-botton-right
toash-bottom-left
toast-top-left
toast-top-full-width 这个是在网页顶端，宽度铺满整个屏幕
toast-bottom-full-width
toast-top-center顶端中间
toast-bottom-center

15. ajax request

버튼:

toastr.success('提交数据成功');
toastr.error('Error');
toastr.warning('只能选择一行进行编辑');
toastr.info('info');

js:

                <button>
                    换个密码
                </button>

16. 구성 요소가 부트스트랩에 속하지 않으므로 bootstrap-switch.min.js 및 bootstrap-switch.min.css를 별도로 소개해야 합니다.

(2) 다운로드 주소: http://www.bootcss.com/p/bootstrap-switch; /

(3) 사용법:

프레임워크 추가:

    $('.btn').on('click',function () {
        $.post('xxx')
            .done(function (result) {
                var json = ajaxResultShow(result);
                if (json.result_code == 0)
                    $('#pwdId').text(json.data1);
            })
            .fail(function () {
            })
            .always(function () {
            });
    });

html에서 구성 요소 추가:

<link>
<link>
<script></script>
<script></script>

js에서 초기화:

    <input>

초기화에서 상태를 직접 설정할 수 있습니다.

        $("[name='my-checkbox']").bootstrapSwitch();

상태 전환:

    $("#isOpenCheckbox").bootstrapSwitch('state',false);

스위치 듣기 이벤트:

    $('#isOpenCheckbox').bootstrapSwitch('toggleState');

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

위 내용은 BootStrap 연구 노트: BootStrap의 공통 구성 요소 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!