Bootstrap学习笔记三

最新推荐文章于 2022-03-31 20:29:15 发布
最新推荐文章于 2022-03-31 20:29:15 发布
阅读量158 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44935015/article/details/90579383
版权

先捋捋需要跳转的几个界面的编写：

1.登录界面，见https://blog.csdn.net/qq_44935015/article/details/90113838

2.前端浏览主页

3.后台界面

前端浏览主页

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

<head>
    <meta charset="UTF-8"></meta>
    <title>首页</title>
    <link rel="stylesheet" href="bootstrap.min.css" />
    <script type="text/javascript" src="bootstrap.min.js"></script>
</head>
<style type="text/css">
    body {
        padding-top: 60px;
        padding-bottom: 40px;
    }
    .data_list {
        border: 1px solid #E5E5E5;
        padding: 10px;
        background-color: #FDFDFD;
        margin-top: 15px;
    }
    .data_list .data_list_title {
        font-size: 15px;
        font-weight: bold;
        border-bottom: 1px solid #E5E5E5;
        padding-bottom: 10px;
        padding-top: 5px;
    }
    .data_list .data_list_title img {
        vertical-align: top;
    }
</style>

<body>
<!--导航条浮动，固定在上方，不会随着滚动条滑下而消失-->
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <!--标题-->
            <a class="brand" href="#">显示</a>
            <!--导航条具有响应式功能，主要是在屏幕较小的设备也能用-->
            <div class="nav-collapse collapse">
                <!--导航标签，H5就有了-->
                <ul class="nav">
                    <li >
                        <a href="#"><i class="icon-home"></i>&nbsp;主页</a>
                    </li>
                    <li>
                        <a href="#"><i class="icon-book"></i>&nbsp;分类管理</a>
                    </li>
                    <li >
                        <a href="#"><i class="icon-user"></i>&nbsp;个人中心</a>
                    </li>
                </ul>
            </div>
            <!--导航条内的表单，居右-->
            <form name="myForm" class="navbar-form pull-right" method="post" action="">
                <input class="span2" id="s_title" name="s_title" type="text" style="margin-top:5px;height:30px;" placeholder="标题">
                <button type="submit" class="btn" onkeydown="if(event.keyCode==13) myForm.submit()"><i class="icon-search" ></i>&nbsp;搜索</button>
            </form>
        </div>
    </div>
</div>
<div class="container">
    <!--流式，按百分比分列-->
    <div class="row-fluid">
        <div class="span9">
            <!--这里的内容经常会变化-->
            <div class="data_list">
                <div class="data_list_title">
                    <img src="f.JPG" /> 最新浏览
                </div>
            </div>
        </div>
        <div class="span3">
            <div class="data_list">
                <div class="data_list_title">
                    <img src="c.JPG" /> 个人中心
                </div>
            </div>

            <div class="data_list">
                <div class="data_list_title">
                    <img src="d.JPG" /> 按类别
                </div>
            </div>

            <div class="data_list">
                <div class="data_list_title">
                    <img src="e.JPG" /> 按日期
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>

在这里插入图片描述
后台界面

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <link rel="stylesheet" href="bootstrap.min.css" />
    <script type="text/javascript" src="bootstrap.min.js"></script>
</head>
<style type="text/css">
    body {
        padding: 20px;
    }

    .headLeft {
        float: left;
    }

    .headRight {
        padding-top: 40px;
        padding-left: 330px;
    }

    .search {
        margin-bottom: 10px;
    }

    .search .toolbar {}
</style>
<!--必须使用较新版本的BootStrap才有如下效果-->

<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <nav class="navbar navbar-fixed-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <a class="navbar-brand " href="#">后台管理</a>
                    </div>
                    <div id="navbar" class="navbar-right">
                        <a class="navbar-brand" href="#">当前用户：xx</a>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <div class="row" style="padding-top: 45px">
        <div class="col-md-3">
            <div class="list-group">
                <!--激活，作为标题-->
                <a href="#" class="list-group-item active ">
                    系统菜单
                </a>
                <a href="#" class="list-group-item">管理一</a>
                <a href="#" class="list-group-item">管理二</a>
                <a href="#" class="list-group-item">管理三</a>
                <a href="#" class="list-group-item">退出</a>
            </div>
        </div>
        <div class="col-md-9">
            <div>
                <ol class="breadcrumb">
                    <li><span class="glyphicon glyphicon-home" ></span>&nbsp;
                        <a href="#">主页</a>
                    </li>
                    <li class="active"></li>
                </ol>
            </div>
            <div align="center" style="padding-top: 50px;">
                <h1>个人后台管理</h1>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div align="center" style="padding-top: 200px">
            </div>
        </div>
    </div>
</div>
</body>

</html>

在这里插入图片描述

记忆小饼干
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap简述
weixin_71437031的博客
08-18 2791
栅格系统提供了基本的前缀，用于在不同宽度的屏幕中实现不同的排列方式，列的类名可以写多个，也就是可以同时设置.col-、.col-sm-、.col-md-、.co-/g-和.col-xl*类名。组件可以有自己的属性和方法。由于栅格系统就是默认将父元素分成12等份，所以可根据占据的份数来设置子元素的宽度，在设置列的宽度时，只需要在不同的类前缀后面加上栅格数量即可。栅格系统页面的内容可以放入这些创建好的布局容器中，并且会根据父元素盒子（布局容器)尺寸的大小进行适当地调节，从而达到响应式页面布局的效果。...
Bootstrap里的文件作用
11-29 709
Bootstrap里的文件分别表示什么？都有什么用？ bootstrap.css bootstrap.min.css bootstrap-responsive.css bootstrap-responsive.min.css bootstrap.js bootstrap.min.js 回答：bootstrap.css 是完整的bootstrap样式表，未经...
Bootstrap基本介绍
m0_68756200的博客
03-31 1万+
Bootstrap 一、Bootstrap是什么 Bootstrap诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架 是一个用于快速开发Web应用程序和网站的前端框架 Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷 概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架 二、为什么要用Bootstrap 因为Bootstrap是一个简洁、直观、强悍的前端开发框架，让web开发更迅速、更容
bootstrap抽样
weixin_39669739的博客
08-07 8071
推断统计是指用样本数量特征推断总体特征 ，在现实生活中，我们只抽取一个样本，计算出一个统计量(样本均值，样本方差，样本比例等）的值，将其作为总体参数的一个估计值，这种方法也称点估计，但是这样做往往不准确，但是我们有了抽样分布的概念，指的是所有估计值的集合，以样本均值为例，由中心极限定理(clt)知， 从均值μ\muμ、方差为σ2{\sigma^2}σ2的任意一个总体中抽取样本容量为nnn的样本，当nnn充分大时，样本均值xˉ\bar{x}xˉ的抽样分布渐进服从均值为μ\muμ,方差为σ2n\frac{\s
统计学中的Bootstrap方法介绍及其应用
芳樽里的歌的博客
01-25 7万+
简要介绍了统计学中的Bootstrap方法及其在时间序列相关检验中的应用。
Bootstrap学习笔记
03-16
Bootstrap 笔记 学习 教程 学习总结 有的class类等是官网上还没介绍的
bootstrap学习笔记之初识bootstrap
10-22
Bootstrap是一款目前非常流行的前端框架，简单的说，就是html,css,javascript的工具集。本文给大家介绍bootstrap学习笔记之初识bootstrap，感兴趣的朋友一起学习吧
bootstrap学习笔记
06-17
自己整理的bootstrap学习笔记，非常值得拥有，需要的朋友，可以下载学习。
bootstrap学习笔记-html5
12-22
bootstrap学习笔记-html5 各类简单案例，适合初学者
Python-djangoadmin美化采用layui作为基本框架改写大部分页面
08-12
django admin 美化，采用layui 作为基本框架，改写大部分页面
高级搜索按钮点击后下拉一个高级查询条件框
03-06
项目中常用的高级搜索按钮 通过点击按钮下拉一个框 通过框中输入的条件进行查询 框中包含了确定搜索和取消按钮 弹出框有关闭功能 非常实用 qiuqiu770130706
前端框架与前端类库的理解
weixin_30627381的博客
10-22 237
　　前端框架的理解误区 　　网站的价值在于它能为用户提供什么价值，在于网站能做什么，而不在于它是怎么做的，所以在网站还很小的时候就去追求网站的架构框架是舍本逐末，得不偿失的。前端框架同理，如果是一个简单的页面型产品，应用只是依赖服务器来生成Web页面和视图，并且只需要使用一些简单的Javascript或者JQuery来使应用更加具有互动性，那么一个JQuery前端类库就可以了，真的没必要用上一些...
Bootstrap方法详解——技术与实例
热门推荐
白马负金羁
11-17 8万+
一、Introduction 如果说到Bootstrap你会想到什么？是Twitter推出的那个用于前端开发的开源工具包吗？Unfortunately，本文要讨论的并非是Bootstrap工具包，而是统计学习中一种重采样（Resampling）技术。这种看似简单的方法，对后来的很多技术都产生了深远的影响。机器学习中的Bagging，AdaBoost等方法其实都蕴含了Bootstrap的思想...
Bootstrap的安装和使用
Mr.Write的博客
05-10 5万+
Bootstrap的安装和使用一. Bootstrap简介Bootstrap是前端开发中比较受欢迎的框架，简洁且灵活。它基于HTML、CSS和JavaScript，HTML定义页面元素，CSS定义页面布局，而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件，用起来简单，粗暴。具体Bootstrap的学习教程可参考菜鸟教程二.
Bootstrap入门
枫叶
02-22 3万+
1、什么是Bootrap2、为什么要学习Bootstrap3、哪些项目在使用Bootstrap4、安装和使用5、简单阅读Bootstrap源码6、Bootstrap全局CSS样式7、Bootstrap组件8、Bootstrap插件（了解）9、Bootstrap定制10、Bootstrap学习意义总结1、什么是BootstrapBootstrap来自 Twitter，是目前很受欢迎的前端框架。Boo...
bootstrap下载安装和基础学习
wanderlustLee的博客
02-26 2万+
1.前往bootstrap官网，下载已经编译好的版本，不是source版。 2.下载后解压，然后将两个文件夹css,js或者三个文件夹css,fonts,js拷贝到工程目录里 我这里没有拷js文件   3.在HTML文件或者jsp文件中引入   &lt;!doctype html&gt;   &lt;html lang="en"&gt;   我这个是在jsp中使用。 ...
bootstrap记忆技巧
weixin_34378969的博客
03-19 639
基础class .code来显示单行内联代码.pre来显示多行块代码.kbd来显示用户输入代码.pre-scrollable高度超出340px，就会在Y轴出现滚动条 表格class .table基础表格margin-bottom:20px，在thead底部2px的浅灰实线，每个单元格顶部1px的浅灰实线.table-striped：斑马线表格，隔行有一...
grpcio-1.47.0-cp310-cp310-linux_armv7l.whl
最新发布
05-22
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值