前端三劍客-08bootstrap

時間 2019-11-30

標籤前端劍客 08bootstrap bootstrap 欄目 Bootstarp 简体版

原文原文鏈接

bootstrap

基於jQuery，也就意味着你在用bootstrap要先導入jQuery文件

佈局容器

左右有固定留白

row 獨佔一行javascript

<div class="container-fluid c1"></div>  全屏展現

柵格系統

一個row就表示一行(這一行默認給你均分紅了12份,每一份你還能夠均分紅12份)

首先使用bootstrap先寫一個佈局容器

<div class='container'></div>   兩邊有空間
<div class='container-fluid'></div>     無空間

<div class="row">  一行
        <div class="col-md-6 col-xs-6"></div>  控制你佔當前行的多少份(md一般爲正常電腦屏幕)
    col-xs-6    意思爲不管多大的顯示器, 當前標籤都找對應12份的6份

列偏移

col-md-offset-3 以md模式偏移3 常搭配 col-m-6 => 6+ 23=12 col-md-8 col-md-offset-2 => 8+22=12java

浮動

pull-left

pull-right  pull-left

文本

text-center 對稱居中jquery

表格

按鈕

btn-sm 小型按鈕

<button class="btn btn-info">button</button>
        <button class="btn btn-warning">button</button>
        <button class="btn btn-danger">button</button>
        <button class="btn btn-primary">button</button>
        <a href="http://www.xiaohuar.com" class="btn btn-primary">Link</a>

btn-block 佔父標籤100%bootstrap