Bootstrap

weixin_55136170

已于 2022-12-15 15:07:22 修改

阅读量127

点赞数

文章标签： bootstrap 前端 javascript

于 2022-12-12 20:32:51 首次发布

本文链接：https://blog.csdn.net/weixin_55136170/article/details/128292804

版权

前端框架Bootstrap

该框架已经写好了很多页面样式，如果需要使用，只需要下载它对应文件，之后直接cv拷贝即可

在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可

版本选择建议使用v3版本：<https://v3.bootcss.com/>

### 注意

**bootstrap的js代码是依赖于jQuery的，也就意味着你在使用Bootstrap动态效果的时候，一定要导入jQuery**

布局容器

    <style>
        .c1 {
            background-color: red;
            height: 100px;
        }
    </style>

</head>
<body>
    <div class="container c1"></div> //左右两侧有留白
    <br>
    <div class="container-fluid c1"></div> // 左右两侧没有留白
</body>

//后续在使用bootstrap做页面的时候 上来先写一个 div class = container, 之后在div内部书写页面

栅格系统

div class="row"></div>
// 写一个row就是将所在的区域划分成12份
<div class="col-md-6"></div>
// 在使用bootstrap的时候

格栅参数

.col-xs-	.col-sm-	.col-md-	.col-lg-
针对不同的显示器 bootstrap会自动选择对应的参数

如果你想要兼容所有的显示器你就全部加上即可

排版

bootstrap将所有原生的HTML标签的文本字体统一设置成了肉眼可以接收的样式

效果一样，但是标签表达的意思不一样（语义）

表格

<table class="table table-hover table-striped table-bordered ">

                    <tr class="success">
                    <th>ID</th>
                    <th  class="text-center">USERNAME</th>
                    <th  class="text-center">PASSWORD</th>
                    <th  class="text-center">HOBBY</th>
                </tr>

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

表单

<div class="container">
    <div class="col-md-8 col-md-offset-2">
        <h2 class="text-center">登录页面</h2>
        <form action="">
            <p>username:<input type="text" class="form-control"></p>
            <p>password:<input type="text" class="form-control"></p>

            <div class="col-sm-6 col-md-offset-3">
                <p>
                    <select name="" id="" class="form-control">
                        <option value="">111</option>
                        <option value="">222</option>
                        <option value="">333</option>
                    </select>
                </p>
            </div>

            <input type="submit">
            <textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
        </form>
    </div>
</div>

针对表单标签加样式就用form-control

            <p>
                <input type="checkbox" >111
                <input type="checkbox" >222
                <input type="radio" >333

            </p>

checkbox和radio我们一般不会给他加form-control, 直接使用原生的即可

针对报错信息可以加has-error(input的父标签)

            <p class="has-error">username:<input type="text" class="form-control"></p>

弹框

swal('你好好吗')
undefined
swal('你好好吗？','我不好，想你了')
undefined
swal('你好好吗？','我不好，想你了','success')
undefined
swal('你好好吗？','我不好，想你了','warning')
undefined
swal('你好好吗？','我不好，想你了','error')
undefined
swal('你好好吗？','我不好，想你了','info')
undefined

weixin_55136170

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap

*bootstrap的js代码是依赖于jQuery的，也就意味着你在使用Bootstrap动态效果的时候，一定要导入jQuery**该框架已经写好了很多页面样式，如果需要使用，只需要下载它对应文件，之后直接cv拷贝即可。在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可。版本选择建议使用v3版本：
复制链接

扫一扫