bootstrap超级基础的用法

nyuXD

于 2021-03-18 18:23:32 发布

阅读量298

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/nyuXD/article/details/114974564

版权

引入样式

    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="bootstrap-3.3.7-dist\js\jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootstrap-3.3.7-dist\js\bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

引入根据自己的路径，引入javascript时要先引入jquery的，bootstrap会调用jquery的方法。

布局容器

container

周围会留下一些空白，一般网页都会留有一定的空白。

container-flied

不会留下空白

      <div class="container" style="background:#0094ff;height:100px;" align="center">
        <h1>class="container"</h1>
    </div>
    <div class="container-flied" style="background:#ff00dc;height:100px;" align="center">
        <h1>class="container-flied"</h1>
    </div>

运行结果
在这里插入图片描述

和字体有关的标签

标题:h(1-6)
小号字: small
加粗:b strong
斜体:i em
使用bootstrap会比原有样式好看些，使用.lead也可起到强调

      <div class="container">
        <h1>标题<small>副标题</small></h1>
        <br />
        <small>小号字</small>
        <br />
        <b>加粗</b>
        <br />
        <strong>加粗</strong>
        <br />
        <i>斜体</i>
        <br />
        <em>斜体</em>
        <br />
        <p>我需要<span class="lead">强调</span>内容</p>
    </div>

运行结果

在这里插入图片描述

栅格

bootstrap将一个容器分成12个栅格，可以通过设置在容器中的格数来进行布局。通过大小的设置，让布局适配任何设备。

    <div class="container">
        <div class="col-sm-1" style="background:red;">1</div>
        <div class="col-sm-1" style="background:#ff6a00;">2</div>
        <div class="col-sm-1" style="background:#b6ff00;">3</div>
        <div class="col-sm-1" style="background:#00ff21;">4</div>
        <div class="col-sm-1" style="background:#00ff21;">5</div>
        <div class="col-sm-1" style="background:#00ffff;">6</div>
        <div class="col-sm-1" style="background:#00ffff;">7</div>
        <div class="col-sm-1" style="background:#0094ff;">8</div>
        <div class="col-sm-1" style="background:#4800ff;">9</div>
        <div class="col-sm-1" style="background:#b200ff;">10</div>
        <div class="col-sm-1" style="background:#ff00dc;">11</div>
        <div class="col-sm-1" style="background:#ff006e;">12</div>
    </div>

演示
在这里插入图片描述
如果超出12将会换行
如果使用栅格记得加上 div .row来进行换行

        <  <div class="container">
        <div class="row">
            <div class="col-sm-3" style="background:red;">1</div>
        </div>
        <div class="row">
            <div class="col-sm-3" style="background:#ff6a00;">2</div>
        </div>
        </div>

演示
在这里插入图片描述

大小分类

大小分为col-xs(超小)/sm(小)/md(中)/lg(大)-num

列偏移

offset

有时不希望东西都挤在一块，需要用间隔
通过添加col-md-offset-num来实现，图为偏移一格

     <div class="container">
       <div class="row">
           <div class="col-sm-3 col-sm-offset-1" style="background:red;">1</div>
       </div>
       <div class="row">
           <div class="col-sm-3" style="background:#ff6a00;">2</div>
       </div>
       </div>

演示
在这里插入图片描述

push

元素向右推，会造成重叠

pull

元素向左拉

   <div class="container">
        <div class="row">
            <div class="col-sm-3 col-sm-push-1" style="background:red;">1</div>
            <div class="col-sm-3" style="background:#ff6a00;">2</div>
        </div>
            <div class="row">
                <div class="col-sm-3 col-sm-pull-1" style="background:red;">3</div>
                <div class="col-sm-3" style="background:#ff6a00;">4</div>
            </div>
        </div>

演示
在这里插入图片描述

颜色

    <div class="text-muted">提示:使用浅灰色</div>
    <div class="text-primary">主要:使用蓝色</div>
    <div class="text-success">成功:使用浅绿色</div>
    <div class="text-info">提示:使用浅蓝色</div>
    <div class="text-warning">警告:使用黄色</div>
    <div class="text-danger">危险:使用褐色</div>

运行结果
在这里插入图片描述

对齐方式

左对齐 .text-left
右对齐 .text-right
居中 .text-center
两端对齐 .text-justify

        <p class="text-left">左对齐</p>
        <p class="text-right">右对齐</p>
        <p class="text-center">居中</p>
        <p class="text-justify">两端对齐</p>

运行结果
在这里插入图片描述

列表

取消默认样式

取消列表样式
由于默认的列表有点，不怎么好看

       <ul class="list-unstyled">
            <!--取消列表样式-->
            <li>XXXXXX</li>
            <li>XXXXXX</li>
            <li>XXXXXX</li>
        </ul>

运行结果
在这里插入图片描述

内联无序列表

一般导航栏都是用横着的列表做的，.list-inline就可以实现

  <ul class="list-inline">
            <!--内联无序列表-->
            <li>Home</li>
            <li>forum</li>
            <li>store</li>
        </ul>

运行结果
在这里插入图片描述

内联自定义列表

如果表头太多会用。。。省略

  <dl class="dl-horizontal">
            <dt>这可能时一个比较长的自定义列表的表头</dt>
            <dd>内容</dd>
            <dd>内容</dd>
            <dd>内容</dd>
        </dl>

运行结果
在这里插入图片描述

风格标签

代码风格

code里面只能装一行

        <code>int i=3;</code>
        <br />
        <code>Sting a=new String("abc")</code>

演示
在这里插入图片描述

键盘风格

      <kbd>Shift</kbd>
        <br />
        <kbd>Ctrl</kbd>

演示在这里插入图片描述

保留文本原来的格式

    <pre>
    你好，我很可爱
 请给我钱
</pre>

演示
在这里插入图片描述
使用.pre-scrollable也可在内容多的时候添加滚动条

  <div class="container" style="width:500px;">
        <pre class="pre-scrollable">
    你好，我很可爱
 请给我钱
    你好，我很可爱
 请给我钱
    你好，我很可爱
 请给我钱
    你好，我很可爱
 请给我钱
    你好，我很可爱
 请给我钱
    你好，我很可爱
 请给我钱
    你好，我很可爱
 请给我钱
    你好，我很可爱
 请给我钱
    你好，我很可爱
 请给我钱
    你好，我很可爱
 请给我钱
    你好，我很可爱
 请给我钱
    你好，我很可爱
 请给我钱
    你好，我很可爱
 请给我钱
    你好，我很可爱
 请给我钱
</pre> 
    </div>

演示在这里插入图片描述

表格

使用.table类名可以继续添加

table-bordered(边框)
table-striped(间隔换色)
table-hover(高亮)类似于hover
table-condensed(紧凑)

 <table class="table">
            <tr>
                <td>可口可乐</td>
                <td>3</td>
            </tr>
            <tr>
                <td>百岁山</td>
                <td>5</td>
            </tr>
            <tr>
                <td>农夫山泉</td>
                <td>2</td>
            </tr>
        </table>

演示
在这里插入图片描述

表单

文本框

.form-control可用于文本框，多选框，文本域等
选中默认呈现蓝色阴影

 <input type="text" value="文本框" class="form-control" />
        <br />
        <select class="form-control">
            <option>多选框</option>
            <option>多选框</option>
        </select>
        <br />
        <textarea class="form-control" placeholder="文本域"></textarea>

演示
在这里插入图片描述

复选框/单选框

.checkbox用于复选框
.radio用于单选框
checkbox和.radio需要在label标签之中，否则会对不齐，并且外面要用div .checkbox
radio基本差不多

 <div class="container">
        <div class="checkbox">
            <label><input type="checkbox" name="hobby" />football</label>
            <label><input type="checkbox" name="hobby" />swim</label>
            <label><input type="checkbox" name="hobby" />basketball</label>
        </div>
        <div class="radio">
            <label><input type="radio" name="sex" />male</label>
            <label><input type="radio" name="sex" />female</label>
        </div>
    </div>

演示
在这里插入图片描述

按钮

颜色

颜色和上面的颜色是一样的
.btn btn-link是类似a标签的样式

 <input type="button" value="button" class="btn" />
        <input type="button" value="button" class="btn btn-danger" />
        <input type="button" value="button" class="btn btn-success" />
        <input type="button" value="button" class="btn btn-warning" />
        <input type="button" value="button" class="btn btn-primary" />
        <input type="button" value="button" class="btn btn-info" />
        <input type="button" value="button" class="btn btn-defualt" />
        <input type="button" value="button" class="btn btn-link" />

在这里插入图片描述

别的标签的使用

不止button标签可以用以上属性
别的标签也可以使用

  	<div class="btn btn-primary">button</div>
    <span  class="btn btn-primary">button</span>
    <a href="a" class="btn btn-primary">button</a>

更换按钮大小

代码依次为小中大

          <input type="button" value="button" class="btn btn-defualt btn-xs" /><!-->小</!-->
        <input type="button" value="button" class="btn btn-info btn-sm" /><!-->中</!-->
        <input type="button" value="button" class="btn btn-link  btn-lg" /><!-->大</!-->

禁用样式

这两者虽然点上去都会出现禁用样式，但是第一张利用disabled属性是真正被禁用了，而用.btn btn-info btn-sm disabled只是有这种样式，是可以继续触发事件的

        <input type="button" value="button" class="btn btn-info btn-sm" onclick="alert('no');" disabled="disabled" />
        <input type="button" value="button" class="btn btn-info btn-sm disabled" onclick="alert('yes');" />

表单布局

给form表单.form-horizontal
使用label中的for=“id”让文字和文本框做一个连接,每个对应的文本框和文字需用div .form-group包裹

           <form action="#" class="form-horizontal" role="form">

            <div class="row">
                <div class="form-group">
                    <label for="uname" class="control-label col-md-2">name</label>
                    <div class="col-md-4">
                        <input type="text" id="uname" class="form-control" placeholder="name" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label for="passwrd" class="control-label col-md-2">password</label>
                    <div class="col-md-4">
                        <input type="text" id="passwrd" class="form-control" placeholder="password" />
                    </div>
                </div>
            </div>

            <div class="form-inline">
                <div class="form-group">
                    <label for="uname2" class="control-label col-md-2">name2</label>
                    <div class="col-md-4">
                        <input type="text" id="uname2" class="form-control" placeholder="name2" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="pwd" class="control-label col-md-2">pass</label>
                    <div class="col-md-4">
                        <input type="text" id="pwd" class="form-control" placeholder="pass" />
                    </div>
                </div>
            </div>
        </form>

演示
在这里插入图片描述

缩略图

使用div .thumbnail配合栅格可以快速做出一个图文介绍

          <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="QQ图片20210317211733.jpg" />
                    <h3>和武はざの</h3>
                    <p>www.pixiv.net/users/1893126</p>
                    <div align="center">
                        <button class="btn-primary col-md-offest-3">点赞</button>
                        <button class="btn-primary">喜欢</button>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="QQ图片20210317211758.jpg" />
                    <h3>和武はざの</h3>
                    <p>www.pixiv.net/users/1893126</p>
                    <div align="center">
                        <button class="btn-primary col-md-offest-3">点赞</button>
                        <button class="btn-primary">喜欢</button>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="QQ图片20210317211804.jpg" />
                    <h3>和武はざの</h3>
                    <p>www.pixiv.net/users/1893126</p>
                    <div align="center">
                        <button class="btn-primary col-md-offest-3">点赞</button>
                        <button class="btn-primary">喜欢</button>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="QQ图片20210317211810.jpg" />
                    <h3>和武はざの</h3>
                    <p>www.pixiv.net/users/1893126</p>
                    <div align="center">
                        <button class="btn-primary col-md-offest-3">点赞</button>
                        <button class="btn-primary">喜欢</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

演示
在这里插入图片描述

nyuXD

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
bootstrap超级基础的用法

引入样式 <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="bootstrap-3.3.7-dist\js\jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script> <script src="bootstrap-
复制链接

扫一扫