bootsrap类的操作

最新推荐文章于 2025-05-08 14:43:07 发布

ICY___

最新推荐文章于 2025-05-08 14:43:07 发布

阅读量205

点赞数

CC 4.0 BY-SA版权

分类专栏： ICY___的bootstrap入门文章标签： bootstrap类

本文链接：https://blog.youkuaiyun.com/ICY___/article/details/88367632

bootstrap 同时被 2 个专栏收录

2 篇文章

订阅专栏

ICY___的bootstrap入门

2 篇文章

订阅专栏

bootsrap中，利用分装好的类名称可以快速的设置一些样式和属性，大大提升的效率，先了解一下如何实现基本的操作吧

首先，引入bootstrap文件（在使用bootstrap时，是将封装好的class给标签元素）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <title>Document</title>
</head>

h1-h6标题

    <div class="h6">123456</div>
    <div class="h1">123456</div>

small 缩小 lead 强调 mark 背景色

<!-- small调小    lead  强调  -->
    <!-- mark  背景色 -->
    <div class="lead">bootstrap</div>
    <div class="mark">1234</div>

文字对齐格式

    <div style="width:100px" class="text-center">1234</div>
    <div style="width:100px" class="text-left">1234</div>
    <div style="width:100px" class="text-right">1234</div>

文本转大小写

    <span class="text-uppercase">apple</span>
    <span class="text-lowercase">APPLE</span>

列表相关

    <!-- list-unstyled 去点 -->
    <!-- list-inline  去点且 转化为水平块级 -->
    <ul class="list-inline">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

水平排列

    <dl class="dl-horizontal">
        <dl>
            <dt>vue</dt>
            <dd>js</dd>
        </dl>
        <dt>vue</dt>
        <dd>js</dd>
    </dl>

浮动类

<!-- pull-left    pull-right -->
    <!-- clearfix清除浮动 -->
    <div class="clearfix">
        <div class="pull-left" style="width: 100px;height: 100px;background-color: pink">vue</div>
        <div class="pull-right" style="width: 100px;height: 100px;background-color: yellow">js</div>
    </div>
    <div style="width: 800px;height: 20px; background-color: green"></div>

图片的响应式

    <img src="./bootstrap/img/1.png" alt="" class="center-block img-responsive img-circle                     
    img-thumbnail img-rounded">

其它（与html类似）

    <del>1234567</del>
    <s>1234567</s>
    <ins>1234567</ins>
    <em>1234567</em>
    <!-- 缩略语 -->
    <abbr title="telephone">tel</abbr>
    <!-- 地址 -->
    <address>
        <strong>Twitter, Inc.</strong><br>
        1355 Market Street, Suite 900<br>
        San Francisco, CA 94103<br>
        <abbr title="Phone">P:</abbr> (123) 456-7890
    </address>

还有一些其它类，其实是和html标签类似的，主要就是上面的这些内容，欢迎留言讨论。