前端三剑客-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