Bootstrap公共样式

2022-03-22 本文已影响0人马佳乐

使用.close和×构建一个关闭按钮;
使用.float-left、.float-right、.float-none实现浮动效果
使用.clear-fix给浮动的区域的父元素添加，实现清理浮动的功能;
还可以使用.float-*-left等来实现不同屏幕的浮动效果
使用.text-hide来隐藏元素标签内容，但本身还存在保持SEO优化;
使用.overflow-auto和.overflow-hidden来设置区域显示方式;
使用.visible和.invisible来设置内容可见或不可见;
使用.align-*来设置内容文本的对齐方式
例如：

        <button class="close"><span>&times;</span></button>
        <br />
        <div style="width: 100px;height: 100px;background-color: #EFEFEF;margin: 10px;" class=" border border-success float-right"></div>
        <div class="clearfix">
            <div style="width: 100px;height: 100px;background-color: #EFEFEF;margin: 10px;" class=" border border-success float-right">clear</div>
        </div>
        <div class="clearfix">
            <div style="width: 100px;height: 100px;background-color: #EFEFEF;margin: 10px;" class=" border border-success float-right overflow-auto">
                clear<br />
                clear<br />
                clear<br />
                clear<br />
                clear<br />
                clear<br />
                clear<br />
                clear<br />
                clear<br />
            </div>
        </div>
        <div class="invisible">不可见</div>
        <div>可见</div>
        <table class="table table-bordered" style="height: 200px;">
            <tr>
                <td class="align-baseline">基准线</td>
                <td class="align-text-top">文本顶部</td>
                <td class="align-top">顶部</td>
                <td class="align-middle">垂直居中</td>
                <td class="align-bottom">底部</td>
                <td class="align-text-bottom">文本底部</td>
            </tr>
        </table>

使用.p-*来设置内边距(padding)，范围在0-5之间和auto;
使用.m-*来设置外边距(margin)，范围在0-5之间和auto;
使用.pt-*或 mt-*设置边缘的距离，这里的t可以是top, 其它还有b(bottom)、l(left)、r(right)等;
使用.px-*或mx-*设置左右边缘距离，这里的x表示(left,right);
使用.py-*或my-*设置上下边缘距离，这里的y表示(top,bottom);
使用.pt-*-5,*可以是md、lg等响应式的方式来设置边缘;
使用.w-*设置元素的长度，包括25%、50%、75%、100%和auto;
使用.h-*设置元素的高度，包括25%、50%、75%、100%和auto;
使用.mw-*和.mh-*设置max-width和max-height;
使用.vw-*和.vh-*设置相对于窗口的大小;
使用.shadow-* 实现元素的阴影效果;
例如：

        <div style="width: 100px;height: 100px;background-color: #EFEFEF;" class=" border float-left p-3">位置距离</div>
        <div style="width: 100px;height: 100px;background-color: #EFEFEF;" class=" border float-left m-4">位置距离</div>
        <div style="width: 100px;height: 100px;background-color: #EFEFEF;" class=" border float-left py-2">位置距离</div>
        <br /><br /><br /><br /><br /><br />
        <div class="bg-dark w-75">11</div>
        <br />
        <div class="bg-dark mw-100">11</div>
        <br />
        <div class="shadow">加阴影</div>

使用.d-*来设置元素的display模式，*可以是none、inline、inline-block、block、table、table-row等;
也可以通过.d-md-*中的md设置响应式的媒体查询效果;
使用.embed-responsive实现嵌入响应式，比如<iframe>、<embed>等
再使用.embed-responsive-16by9实现响应式比例，还可以21:9,4:3,1:1;
使用.text-*设置文本的对齐方式，有left、 center、right;
也可以设置.text-md-*实现响应式的媒体查询效果;
使用.text-warp和.text-nowarp实现文本溢出时是否换行;
使用.text-break对于很长的字符串，且中间没有空格实现换行;
使用.text-lowercase设置小写，.text-uppercase设置大写，以及.text-capitalize设置首字母大写;
使用.font-weight-bold加粗、.font-weight-normal 正常、.font-weight-light 纤细、.font-italic倾斜;
使用.text-monospace设置等宽字体;
使用.text-reset 实现字体颜色的重置;
使用.text-decoration-none删除超链接下划线;
例如：

        <div class="embed-responsive embed-responsive-16by9">
            <iframe src="Bootstrap安装测试.html" frameborder="0"></iframe>
        </div>
        <div class="border border-success text-nowrap" style="width: 100px;">1111111  11111111</div>
        <div class="border border-success text-break" style="width: 100px;">111111111111111</div>
        <div class="text-uppercase font-italic text-monospace">Hello World</div>
        <div>
            <a href="#" class="text-reset text-decoration-none">超链接</a>
        </div>

Bootstrap公共样式

猜你喜欢

热点阅读