Bootstrap3学习一

最新推荐文章于 2023-09-01 12:37:05 发布

*Ryzyy

最新推荐文章于 2023-09-01 12:37:05 发布

阅读量239

点赞数

分类专栏：网页设计文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_40531326/article/details/89307434

版权

网页设计专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Bootstrap3学习一

学习网站：https://v3.bootcss.com/css/

一、栅格系统
在这里插入图片描述
二、响应式工具
1.可用的类:通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

2.导航栏
navbar-toggle样式是控制3根斑马线的。
collapsed是为了响应折叠插件的。
data-toggle=“collapse”表明这个button是一个折叠控件，其折叠的内容指向data-target="#navbar"，即是id为navbar的内容。
aria-expanded=“false”表示初始控件是折叠的。

三、例子
1.固定代码

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>图书推荐系统</title>
        <!-- 引入 Bootstrap -->
        <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
   <div class="head-top"><h2>图书推荐系统</h2></div>
    <!-- jQuery (Bootstrap的JavaScript插件需要引入jQuery) -->
    <script src="bootstrap-3.3.7-dist/js/jquery-1.9.1.js"></script>
    <!-- 包括所有已编译的插件 -->
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    </body>
    </html>

2.图书推荐系统简单页面

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>图书推荐系统</title>
        <!-- 引入 Bootstrap -->
        <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
    <header>
        <div class="head-top"><h2>图书推荐系统</h2></div>
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <!-- 汉堡按钮 -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
                        <span class="sr-only">汉堡按钮</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="navbar-collapse">
                    <!-- 导航条菜单 -->
                    <ul class="nav navbar-nav">
                        <li><a href="#">书单推荐</a></li>
                        <li><a href="#">小说类</a></li>
                        <li><a href="#">历史类</a></li>
                        <li><a href="#">旅游类</a></li>
                        <li><a href="#">漫画类</a></li>
                        <li><a href="#">科学类</a></li>
                    </ul>     
                </div>
            </div>
        </nav>
    </header>
    <!-- 设置通栏的背景图片 -->
    <div class="search">
        <!-- 布局容器 -->
        <div class="container">
            <!-- 表单的白色透明背景 -->
            <div class="reservation">
                <!-- 水平表单 -->
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <div class="col-sm-12 col-md-12 col-lg-12">
                            <input type="text" class="form-control input-lg" id="name" placeholder="请输入书名">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12 col-md-12 col-lg-12">
                            <select id="country"  class="form-control input-lg">
                                <option value="null">请选择图书类型</option>
                                <option value="bj">小说类</option>
                                <option value="sh">历史类</option>
                                <option value="sz">旅游类</option>
                                <option value="sz">漫画类</option>
                                <option value="sz">科学类</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="search_btn">
                            <button type="submit" class="btn btn-success btn-lg"><img src="./img/search-icon.png"> 搜索</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- jQuery (Bootstrap的JavaScript插件需要引入jQuery) -->
    <script src="bootstrap-3.3.7-dist/js/jquery-1.9.1.js"></script>
    <!-- 包括所有已编译的插件 -->
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    </body>
    </html>

结果如下：
在这里插入图片描述

*Ryzyy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap3学习一

Bootstrap3学习一学习网站：https://v3.bootcss.com/css/一、栅格系统二、响应式工具1.可用的类:通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。2.导航栏navbar-toggle样式是控制3根斑马线的。collapsed是为了响应折叠插件的。data-toggle=“collapse”表明这个button是一个折叠控件...
复制链接

扫一扫