基于Bootstrap快速搭建响应式网站

最新推荐文章于 2024-05-05 01:32:36 发布

冷太阳a

最新推荐文章于 2024-05-05 01:32:36 发布

阅读量1.6k

点赞数

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/A_9888/article/details/106478384

版权

Bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.Bootstrap是什么

Bootstrap框架其实就是底层被写入了无数的Css样式和js交互效果的前端样式组件。

2.Bootstrap组成

在这里插入图片描述

3.快速上手实例

注意：引用bootstrap的js 是基于jQuery实现的，首先要在前面引入jQuery；
bootstrap提供了强大的css内置样式：比如在小屏幕下隐藏hidden-x ，图片响应式：img-responsive .pull-left等一系列的内置样式。

	<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap-header</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    <style>
        .navbar {
            height: 70px;
        }

        .navbar-nav li a {
            width: 86px;
            height: 70px;
            text-align: center;
            line-height: 40px;
            transition: all .5s;
        }

        .navbar-nav li a:hover {

            background-color: transparent;
            border-bottom: 5px solid #f7d40a;
        }

        .navbar-toggle {
            margin-top: 20px;
        }

        .navbar-brand {
            line-height: 40PX;
        }

        .navbar-form {
            line-height: 50px;
        }

        .dropdown a {
            height: 70px;
            line-height: 50px;
        }

        .item-box li {
            border: 1px solid darkmagenta;
        }
    </style>
</head>

<body>
    <header id=header>
        <nav class="navbar navbar-inverse navbar-static-top ">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <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="#">log</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">主页 <span class="sr-only">(current)</span></a></li>
                        <li class=""><a href="#">产品</a></li>
                        <li><a href="#">文档</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false">选择城市 <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">重庆</a></li>
                                <li><a href="#">成都</a></li>
                                <li><a href="#">广州</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">北京</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">武汉</a></li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-form navbar-right hidden-xs">
                        <div class="form-group ">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right  hidden-xs">
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false">个人中心</span> <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">退出登录</a></li>
                                <li><a href="#">修改密码</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </header>
    <main class="container">
        <div class="row">
            <div class="col-md-5">
                 <h3>五、栅格系统(核心)*</h3>
                <p>Bootstrap包含了一个强大的移动优先的网格系统，它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)
                    缩写 | 描述 | 范围
                    -------- | ----- | -----
                    xs |超小屏幕 |<576px sm | 小屏幕|576px ~768px md | 中等屏幕 | 768px~992px lg |大屏幕|992px~1200px xl | 超大屏幕 |>1200px</p> 
            </div>
            <div class="col-md-7">
                <img class="img-responsive" src="./shange.png" alt="">
            </div>
        </div>
    </main>

</body>

</html>

冷太阳a

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
基于Bootstrap快速搭建响应式网站

1.Bootstrap是什么Bootstrap框架其实就是底层被写入了无数的Css样式和js交互效果的前端样式组件。2.Bootstrap组成3.快速上手实例注意：引用bootstrap的js 是基于jQuery实现的，首先要在前面引入jQuery；bootstrap提供了强大的css内置样式：比如在小屏幕下隐藏hidden-x ，图片响应式：img-responsive .pull-left等一系列的内置样式。<!DOCTYPE html><html lang="en
复制链接

扫一扫

专栏目录