前框之Bootstrap框架

最新推荐文章于 2021-05-31 00:35:08 发布

qq_52159647

最新推荐文章于 2021-05-31 00:35:08 发布

阅读量165

点赞数

分类专栏：前端文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_52159647/article/details/113173736

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

简介

前端框架Bootstrap框架封装了多种已经装饰好的样式,我们要使用它直接通过类操作即可,如果有需求可以参考官网文档,然后copy下来.
链接：https://v3.bootcss.com/css/#overview-normalize

基本知识点

布局容器

<!--1.container 左右留白-->
<div class="container">
  ...
</div>
<!--2.container-fluid 平铺-->
<div class="container-fluid">
  ...
</div>

栅格系统

<div class='row'> # row 将所在的行分为12等分
	<div class='col-md-...'> # 可以拿1-12分,多余的会到下一排
	</div>
</div>
col-md-6 col-xs-6 col-sm-6 col-lg-6 适应与不同的显示尺寸,如果要兼容则都可以加上
<div class="row" >
	<div class="col-md-6 col-xs-6 col-sm-6 col-lg-6 inner">123</div>
	<div class="col-md-6 col-xs-6 col-sm-6 col-lg-6 inner">456</div>
	<div class="col-md-6 col-xs-6 col-sm-6 col-lg-6 inner">456</div>
</div>

对齐

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

列表

可以给table标签设置 table table-striped table-hover table-bordered等属性
可以给tr设置每行的颜色 active success warning info danger
例：
<body>
    <div class="container">
        <div>
            <table class="table table-striped table-hover">
                <thead>
                    <tr class="success">
                        <th class="text-center">username</th>
                        <th class="text-center">password</th>
                        <th class="text-center">habbies</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="success">
                        <td class="text-center">jason</td>
                        <td class="text-center">123123</td>
                        <td class="text-center">dbj</td>
                    </tr>
                    <tr class="warning">
                        <td class="text-center">jason</td>
                        <td class="text-center">123123</td>
                        <td class="text-center">dbj</td>
                    </tr>
                    <tr class="danger">
                        <td class="text-center">jason</td>
                        <td class="text-center">123123</td>
                        <td class="text-center">dbj</td>
                    </tr>
                    <tr class="active">
                        <td class="text-center">jason</td>
                        <td class="text-center">123123</td>
                        <td class="text-center">dbj</td>
                    </tr>
                    <tr class="info">
                        <td class="text-center">jason</td>
                        <td class="text-center">123123</td>
                        <td class="text-center">dbj</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>

表单

详情参考官网文档
对于想美化的表单可以是添加form-contorl类,对于按钮类与选项类通常使用普通的
<div class="container">
        <div class="col-md-8 col-md-offset-2">
            <h2 class="text-center">登录界面</h2>
            <form>
                username:<input type="text" class="form-control">
                password:<input type="password" class="form-control">
                describe:<textarea class="form-control rows='3'"></textarea>
                <br>
                <button class="btn btn-success">登录</button>
            </form>
        </div>
    </div>

按钮

1.美化按钮
添加btn属性
2.美化颜色
btn-success
btn-warning
btn-danger
btn-default
btn-info
btn-primary
3.美化大小
默认为btn-md
btn-lg
btn-sm
btn-xs
4.让按钮变成块级标签，且占宽度的100%
btn-block

图标

    <div class="container">
        <div class="row">
            <h2 class="text-center">登录界面<span class="glyphicon glyphicon-user"></span></h2>
        </div>
    </div>
具体参考官网文档

<nav class="navbar navbar-inverse"> 黑色
<nav class="navbar navbar-default"> 白色

分页器

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

弹出框

使用sweetalert插件
https://lipis.github.io/bootstrap-sweetalert/

swal('xxx')
swal('xxx','xxx')

4种图表显示
success
warning
error
info

第三方插件

"""
1.sweetalert
2.footawesome
"""

qq_52159647

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前框之Bootstrap框架

简介前端框架Bootstrap框架封装了多种已经装饰好的样式,我们要使用它直接通过类操作即可,如果有需求可以参考官网文档,然后copy下来.链接：https://v3.bootcss.com/css/#overview-normalize基本知识点布局容器<div class="container"> ...</div><div c
复制链接

扫一扫