bootsrap类的操作

淩亂°似流年 2022-03-10 04:46 53阅读 0赞

> 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标题

*  small 缩小  lead  强调  mark  背景色

<div class="lead">bootstrap</div>
        <div class="mark">1234</div>

*  文字对齐格式

*  文本转大小写

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

*  列表相关

<ul class="list-inline">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>

*  水平排列

*  浮动类

<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>

*  图片的响应式

*  其它（与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标签类似的，主要就是上面的这些内容，欢迎留言讨论。