【学习笔记】bootstrap的使用

最新推荐文章于 2024-10-02 23:33:51 发布

Noob小叮当

最新推荐文章于 2024-10-02 23:33:51 发布

阅读量141

点赞数

文章标签： css bootstrap html

本文链接：https://blog.csdn.net/qq_16696457/article/details/109187841

版权

bootstrap简介

bootstrap是什么？
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。
bootstrap特点是什么？
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

下载地址文档地址

使用bootstrap

（1）复制bootstrap的内容到webapp文件夹
（2）在页面引入
（3）使用项目访问路径 ${path}

<!DOCTYPE html>
<html lang="zh-CN">
  <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>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="${pageContext.request.contextPath}/js/jquery-1.11.0.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
  </body>
</html>

（4）设置spring-mvc的静态资源拦截规则

   <!--过滤静态资源   .js .css png-->
  <!--方式一-->
    <mvc:resources location="/css/" mapping="/css/**" />
    <mvc:resources location="/images/" mapping="/images/**" />
    <mvc:resources location="/js/" mapping="/js/**" />
    <mvc:resources location="/fonts/" mapping="/fonts/**" />
    ------------------------------------------------------------
  <!--方式二-->
   <mvc:default-servlet-handler/>

（5）测试
css样式需要在布局容器中使用

<div class="container">
  ...
</div>

页面布局控制
栅格参数
在这里插入图片描述
使用示例:

效果图
在这里插入图片描述
代码:

<div class="container">
    <div class="row clearfix">
        <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>
    </div>
</div>
</div>