BootStrap基本使用

zhiguo98

于 2019-12-07 14:07:06 发布

阅读量165

点赞数

分类专栏： BootStrap

本文链接：https://blog.csdn.net/yanzhiguo98/article/details/103414180

版权

BootStrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这几天在学习BootStrap，发现前端的知识真的非常复杂，要记得知识点特别多，而且自己也不会设计界面，自己写的界面也不好看，没办法，只能硬着头皮去尝试，去写一些基本的前端界面。

对于BootStrap的框架我不做介绍，因为我自己也是不太懂，但是我知道怎么用的。以下的代码都是一些小小demo，便于自己以后查找使用吧！

1、基本的框架：

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>药品管理系统</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.3.1.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>

<!--首部-->
<header id="header" class="container-fluid">
    aaa
</header>
<!--内容-->
<div id="content" class="container">
    sss
</div>
<!--尾部-->
<footer id="footer" class="container-fluid">
    fff
</footer>


</body>
</html>

2、最最最基本的栅格系统：

2.1、每个界面的三个部分：

2.2、页眉的结构举例

2.3、对栅格系统的理解：

3、轮播图：

<div class="container col-md-10 col-md-offset-1">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="4.jpg" alt="...">
                    <div class="carousel-caption">
                        ...
                    </div>
                </div>
                <div class="item">
                    <img src="5.jpg" alt="...">
                    <div class="carousel-caption">
                        ...
                    </div>
                </div>
                <div class="item">
                    <img src="6.jpg" alt="...">
                    <div class="carousel-caption">
                        ...
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

4、表格：

<div class="container">
    <h3 style="text-align: center;color: #0f0f0f">药品基本信息目录</h3>
    <form id="queryById" action="/findOne.do" method="post">
        <input style="height: 30px" type="text" name="id" placeholder="请输入id" value="">
        <button id="query" type="button" class="btn btn-md btn-primary">查询</button>
        <a id="add" type="button" class="btn btn-md btn-success" href="jsp/user_add.jsp">添加</a>
    </form>
    <br>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>名称</th>
            <th>城市</th>
            <th>邮编</th>
            <th>名称</th>
            <th>城市</th>
            <th>邮编</th>
            <th>名称</th>
            <th>城市</th>
            <th>邮编</th>
            <th>操作</th>

        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Tanmay</td>
            <td>Bangalore</td>
            <td>560001</td>
            <td>Tanmay</td>
            <td>Bangalore</td>
            <td>560001</td>
            <td>Tanmay</td>
            <td>Bangalore</td>
            <td>560001</td>
            <td><a type="button" class="btn btn-md btn-danger" href="">删除</a>
                <a type="button" class="btn btn-md btn-warning" href="">修改</a>
            </td>
        </tr>
        <tr>
            <td>Sachin</td>
            <td>Mumbai</td>
            <td>400003</td>
            <td>Tanmay</td>
            <td>Bangalore</td>
            <td>560001</td>
            <td>Tanmay</td>
            <td>Bangalore</td>
            <td>560001</td>
            <td>
                <a type="button" class="btn btn-md btn-danger" href="">删除</a>
                <a type="button" class="btn btn-md btn-warning" href="">修改</a>
            </td>
        </tr>
        <tr>
            <td>Uma</td>
            <td>Pune</td>
            <td>411027</td>
            <td>Tanmay</td>
            <td>Bangalore</td>
            <td>560001</td>
            <td>Tanmay</td>
            <td>Bangalore</td>
            <td>560001</td>

            <td><a type="button" class="btn btn-md btn-danger" href="">删除</a>
                <a type="button" class="btn btn-md btn-warning" href="">修改</a>
            </td>
        </tr>
        </tbody>
    </table>

   
</div>

5、分页：

 <ul  class="pagination">
        <li><a href="#">首页</a></li>
        <li><a href="#">上一页</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="#">下一页</a></li>
        <li><a href="#">尾页</a></li>
    </ul>

zhiguo98

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BootStrap基本使用

这几天在学习BootStrap，发现前端的知识真的非常复杂，要记得知识点特别多，而且自己也不会设计界面，自己写的界面也不好看，没办法，只能硬着头皮去尝试，去写一些基本的前端界面。对于BootStrap的框架我不做介绍，因为我自己也是不太懂，但是我知道怎么用的。以下的代码都是一些小小demo，便于自己以后查找使用吧！1、基本的框架：<!DOCTYPE html><h...
复制链接

扫一扫