使用Bootstrap的后台猿人可能会用到的功能

最新推荐文章于 2022-08-18 17:14:45 发布

爆米花机枪手

最新推荐文章于 2022-08-18 17:14:45 发布

阅读量1.6k

点赞数 1

分类专栏：项目工具 Web前端 HTML 文章标签： bootstrap 前端框架

本文链接：https://blog.csdn.net/qqHJQS/article/details/54645976

版权

本文是后端开发者整理的Bootstrap使用心得，包括引入样式、水平导航、轮播、图片自适应、居中布局等常见功能实现，适用于快速构建前端页面。

摘要由CSDN通过智能技术生成

写在前面

本人主要做服务器端这块，对前端页面了解不是很深，最近公司要求做一个门户网站，我就使用bootstrap样式框架来写，我把中间用到的小模块收集起来做个记录，下次直接复制使用
注：以下基于bootstrap3.1.1

引入样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="//cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="//cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js"></script>
        <script src="//cdn.bootcss.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    </body>
</html>

水平导航

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">LOGO</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="home.html">首    页</a>
                </li>
                <li>
                    <a href="#" data-toggle="modal" data-target="#myModal">下载</a>
                </li>
                <li>
                    <a href="investment.html">投资顾问</a>
                </li>
                <li>
                    <a href="help.html">帮助</a>
                </li>
                <li>
                    <a href="about.html">关于</a>
                </li>
            </ul>
            <!--
                应该能看懂navbar-right的用法吧
            -->
            <form class="navbar-form navbar-right">
                <a class="btn" id='btnCtrl' href="#">登录</a>
                <a class="btn btn-primary" href="#">注册</a>
            </form>
        </div>
    </div>
</nav>