刘彦均 boostrap

最新推荐文章于 2024-07-25 11:26:35 发布
最新推荐文章于 2024-07-25 11:26:35 发布
阅读量208 收藏
点赞数
文章标签： bootstrap html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/andy666_/article/details/123615160
版权

面版 媒体对象 字体图标 分页

<!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"> 
    <title>博客</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  </head>
  <body>
	  <script src="./js/jquery.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
	  <script src="./js/bootstrap.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
	<div class="navbar">
    <nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <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="#">博客</a>
        </div>
        <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><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="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
		  
		  <!-- <nav class="navbar navbar-inverse"> -->
		    
		  <!-- </nav> -->
		  
          <form class="navbar-form navbar-left">
            <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">
            <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="#">Action</a></li>
                <li><a href="#">Another action</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>

		</div>
		
		<div class="container-fluid " >
			<div class="row">
				<div class="col-md-2">
					<div class="panel panel-default">
						<div class="panel-body">
							<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>
							</div>
						</div>
					</div>
				</div>
			<div class="col-md-7 ">
					<div class="panel panel-default">
					  <div class="panel-body">
						
					    <div class="media">
					      <div class="media-left media-heading">
					        <a href="#">
					          <img class="media-object" src="./img/header.jpg" alt="...">
					        </a>
					      </div>
					      <div class="media-body">
					        <h4 class="media-heading">
								<a href="#">
									Python数据挖掘与分析
								</a></h4>
								<p>
								在实际应用中，待分析数据的来源类型可能是非常繁杂的，必然需要将其读入并转化为方便处理的结构和形式，为后续的工作做好准备。本课程介绍使用Python进行数据分析的第一步，即不同类型的数据获取，内容涉及txt、csv、docx、xlsx、json等不同类型文件内容的读取，列表、字典、集合等在数据分析时常用的Python内置类型的用法，Python标准库json和扩展库pandas、Scrapy的简单用法。
								</p>
								<div class="row">
									<div class="col-md-8">
										<span class="glyphicon glyphicon-user" aria-hidden="true"></span> 密斯特劉-1天前</div>
									<div class="col-md-4">
										<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>  1434 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>  124</div>
								</div>
					      </div>
					    </div>
						<div class="media">
						  <div class="media-left media-heading">
						    <a href="#">
						      <img class="media-object" src="./img/header.jpg" alt="...">
						    </a>
						  </div>
						  <div class="media-body">
						    <h4 class="media-heading">
								<a href="#">
									Python数据挖掘与分析
								</a></h4>
								<p>
								在实际应用中，待分析数据的来源类型可能是非常繁杂的，必然需要将其读入并转化为方便处理的结构和形式，为后续的工作做好准备。本课程介绍使用Python进行数据分析的第一步，即不同类型的数据获取，内容涉及txt、csv、docx、xlsx、json等不同类型文件内容的读取，列表、字典、集合等在数据分析时常用的Python内置类型的用法，Python标准库json和扩展库pandas、Scrapy的简单用法。
								</p>
								<div class="row">
									<div class="col-md-8">
										<span class="glyphicon glyphicon-user" aria-hidden="true"></span> 密斯特劉-2天前</div>
									<div class="col-md-4">
										<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>  2364  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>  567</div>
								</div>
						  </div>
						</div>
						<div class="media">
						  <div class="media-left media-heading">
						    <a href="#">
						      <img class="media-object" src="./img/header.jpg" alt="...">
						    </a>
						  </div>
						  <div class="media-body">
						    <h4 class="media-heading">
								<a href="#">
									Python数据挖掘与分析
								</a></h4>
								<p>
								在实际应用中，待分析数据的来源类型可能是非常繁杂的，必然需要将其读入并转化为方便处理的结构和形式，为后续的工作做好准备。本课程介绍使用Python进行数据分析的第一步，即不同类型的数据获取，内容涉及txt、csv、docx、xlsx、json等不同类型文件内容的读取，列表、字典、集合等在数据分析时常用的Python内置类型的用法，Python标准库json和扩展库pandas、Scrapy的简单用法。
								</p>
								<div class="row">
									<div class="col-md-8">
										<span class="glyphicon glyphicon-user" aria-hidden="true"></span> 密斯特劉-3天前</div>
									<div class="col-md-4">
										<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>  3451 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>  416</div>
								</div>
						  </div>
						</div>
						<div class="media">
						  <div class="media-left media-heading">
						    <a href="#">
						      <img class="media-object" src="./img/header.jpg" alt="...">
						    </a>
						  </div>
						  <div class="media-body">
						    <h4 class="media-heading">
								<a href="#">
									Python数据挖掘与分析
								</a></h4>
								<p>
								在实际应用中，待分析数据的来源类型可能是非常繁杂的，必然需要将其读入并转化为方便处理的结构和形式，为后续的工作做好准备。本课程介绍使用Python进行数据分析的第一步，即不同类型的数据获取，内容涉及txt、csv、docx、xlsx、json等不同类型文件内容的读取，列表、字典、集合等在数据分析时常用的Python内置类型的用法，Python标准库json和扩展库pandas、Scrapy的简单用法。
								</p>
								<div class="row">
									<div class="col-md-8">
										<span class="glyphicon glyphicon-user" aria-hidden="true"></span> 密斯特劉-4天前</div>
									<div class="col-md-4">
										<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>  8654 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>  6858</div>
								</div>
						  </div>
						</div>
						<div class="media">
						  <div class="media-left media-heading">
						    <a href="#">
						      <img class="media-object" src="./img/header.jpg" alt="...">
						    </a>
						  </div>
						  <div class="media-body">
						    <h4 class="media-heading">
								<a href="#">
									Python数据挖掘与分析
								</a></h4>
								<p>
								在实际应用中，待分析数据的来源类型可能是非常繁杂的，必然需要将其读入并转化为方便处理的结构和形式，为后续的工作做好准备。本课程介绍使用Python进行数据分析的第一步，即不同类型的数据获取，内容涉及txt、csv、docx、xlsx、json等不同类型文件内容的读取，列表、字典、集合等在数据分析时常用的Python内置类型的用法，Python标准库json和扩展库pandas、Scrapy的简单用法。
								</p>
								<div class="row">
									<div class="col-md-8">
										<span class="glyphicon glyphicon-user" aria-hidden="true"></span> 密斯特劉-5天前</div>
									<div class="col-md-4">
										<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>  3475  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>  322</div>
								</div>
						  </div>
						</div>
						<div class="media">
						  <div class="media-left media-heading">
						    <a href="#">
						      <img class="media-object" src="./img/header.jpg" alt="...">
						    </a>
						  </div>
						  <div class="media-body">
						    <h4 class="media-heading">
								<a href="#">
									Python数据挖掘与分析
								</a></h4>
								<p>
								在实际应用中，待分析数据的来源类型可能是非常繁杂的，必然需要将其读入并转化为方便处理的结构和形式，为后续的工作做好准备。本课程介绍使用Python进行数据分析的第一步，即不同类型的数据获取，内容涉及txt、csv、docx、xlsx、json等不同类型文件内容的读取，列表、字典、集合等在数据分析时常用的Python内置类型的用法，Python标准库json和扩展库pandas、Scrapy的简单用法。
								</p>
								<div class="row">
									<div class="col-md-8">
										<span class="glyphicon glyphicon-user" aria-hidden="true"></span> 密斯特劉-6天前</div>
									<div class="col-md-4">
										<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>  68453  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>  5734</div>
								</div>
						  </div>
						</div>
						<nav aria-label="Page navigation">
						  <ul class="pagination">
						    <li>
						      <a href="#" aria-label="Previous">
						        <span aria-hidden="true">&laquo;</span>
						      </a>
						    </li>
						    <li class="active"><a href="#">1</a></li>
						    <li><a href="#">2</a></li>
						    <li><a href="#">3</a></li>
						    <li class="disabled"><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>
				<div class="col-md-3">
					<div class="panel panel-default">
					  <div class="panel-heading">公告</div>
					  <div class="panel-body">
						  <a href="#">一起来敲代码吧</a>
					  </div>
					</div>
					
					<div class="panel panel-default">
					  <!-- Default panel contents -->
					  <div class="panel-heading">开发者名片</div>
					  <!-- List group -->
					  <ul class="list-group">
					    <li class="list-group-item">网名：密斯特劉</li>
					    <li class="list-group-item">职业：学生</li>
						<li class="list-group-item">学校：青岛职业技术学院</li>
					    <li class="list-group-item">QQ号：277525611</li>
					    <li class="list-group-item">微信号：Nov10-Echo-LYJ</li>
					    <li class="list-group-item">邮箱地址：277525611@qq.com</li>
					  </ul>
					</div>
					
					<div class="panel panel-default">
					  <!-- Default panel contents -->
					  <div class="panel-heading">更多</div
					  <!-- List group -->
					  <ul class="list-group">
					    <li class="list-group-item"><a href="#">程序员主页</a></li>
					    <li class="list-group-item"><a href="#">联系我</a></li>
					  </ul>
					</div>
				</div>
			</div>
		</div>
		
		

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="./js/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="./js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

在这里插入图片描述

Andi666-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Bootstrap使用
m0_57774967的博客
04-24 5144
一、使用bootstrap步骤： 1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容（直接用bootstrap预先定义好的样式使用 修改bootstrap原来样式，注意权重问题） 要想学好bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果 布局容器 bootstrap需要为页面内容和栅格系统包裹一个.container容器，bootstrap预先定义好这个类，叫.container，它提供...
Bootstrap框架
热门推荐
https://blog.csdn.net/m0_74834215
12-20 1万+
Bootstrap框架 1.响应式开发 （1）响应式开发原理 响应式开发就是通过媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备划分 尺寸区间 超小屏幕（手机） <= 768xp 小屏设备（平板） 768px ~ 992px 中等屏幕（左面显示器） 992px ~ 1200px 宽屏设备（大桌面显示器） >= 1200px （2）响应式布局容器 响应式需要一个父级容器作为布局容器，来配合子集元素来实现变化效果。 在不同屏幕下，通过媒
bootstrap网页作业
m0_62221227的博客
04-19 5033
bootstrap网页作业
Bootstrap 标签 label
歪脖先生的博客
05-21 6595
标签 Bootstrap提供的标签，主要用来显示提示信息等内容，它的基本样式通过 .label类实现，默认以圆角矩形呈现。如： <h1>Example heading<spanclass="label label-default">New</span></h1> <h2>Example heading<span...
Bootstrap简介
归兮的博客
08-18 8576
bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。Bootstrap 4 概览_Bootstrap中文网什么是组件组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象思想来说，将一些符合某种规范的类组合在一起就构成了组件，通过组件可以为用户提供某些特定的功能。...
bootstrap-4.6.2
06-13
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件、样式和JavaScript插件，用于快速构建响应式和移动优先的网页。标题"bootstrap-4.6.2"表明我们讨论的是Bootstrap框架的第4版中的第6次次要...
bootstrap-4.3.1
06-30
在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版，4的最主要变化包括以下方面： 从 Less 迁移到 Sass 改进网格系统 缺省弹性框支持 Dropped wells, thumbnails, and panels for cards 合并所有 ...
Bootstrap期末作品
12-18
整体运用了栅格系统布局，局部应用了固定到顶部的导航栏组件，下拉菜单组件，轮播图插件，以及Bootstrap自带的按钮样式。希望通过学习Bootstrap从这种布局的思想，实现的方式中加深对CSS html 的理解
Bootstrap5 图标库 bootstrap-icons
09-30
Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源，它为开发者提供了大量美观、一致的SVG图标，可以方便地集成到Bootstrap5项目中，为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...
bootstrap.css
01-27
bootstrap的css文件
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3294
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
【HTML — 构建网络】HTML 入门
07-24 1220
如果您查看许多其他站点的代码，您可能会遇到许多奇怪的标记样式，包括不带引号的属性值。在这一点上，你应该了解 HTML 是什么样子的，以及它在基本层面上是如何工作的。在 HTML 中，不需要在 void 元素标记的末尾添加 a，例如： .但是，它也是一种有效的语法，当您希望 HTML 是有效的 XML 时，您可以这样做。现在，您可以在 Web 浏览器中打开此文件，以查看呈现的代码的外观。在本练习中，您可以如前所述在计算机上本地编辑代码，也可以在下面的示例窗口中编辑代码（在本例中，可编辑示例窗口仅表示。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
最新发布
xcLeigh
07-25 2031
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
HTML 基础知识
07-24 1033
你写的替代文本应该为读者提供足够的信息，以便对图像传达的内容有一个很好的了解。对于我们的Firefox徽标，一个更好的替代品是“Firefox徽标：围绕地球的火焰狐狸”。如果它们如上所示重叠，那么您的 Web 浏览器将尝试对您想说的内容做出最佳猜测，这可能会导致意外结果。正如我们之前所说，它将图像嵌入到我们的页面中，该图像位于它出现的位置。空格（或任何字符）的简单属性值可以保持不加引号的状态，但建议您将所有属性值加引号，因为这可以使代码更加一致和易于理解。创建链接后，单击它以确保它将您发送到您想要的地方。
IPython的HTML魔法：%%html_header命令全解析
2401_85762266的博客
07-24 1199
IPython是一个增强的Python交互式解释器，而Jupyter Notebook是一个基于Web的开源项目，允许用户创建和共享包含实时代码、方程、可视化和解释性文本的文档。HTML头部是网页文档的元数据区域，它包含了文档的标题（title）、样式表链接（link）、脚本链接（script）等信息。的使用，可以让您更灵活地定制Notebook的样式和功能，从而提供更加丰富和个性化的文档体验。命令的使用非常简单。你只需要在Notebook的单元格中输入该命令，然后写入你想要添加到头部的HTML代码即可。
HTML开发小技巧：根据用户浏览器的分辨率调整控件的大小
ioioppk的博客
07-25 599
在Html页面开发中，我们通常会用Style进行控件的宽度高度进行控件的格式设置，如果直接设置像素的话，无法根据用户的浏览器进行宽高的适配，所以我们要做到根据实际使用的浏览器进行控件大小的自动调整，以下是几种控件自动调整的方式：
HTML前端 盒模型及常见的布局 流式布局 弹性布局 网格布局
wuyujin1997的博客
07-23 391
CSS 两种盒模型 box-sizing content-box 和 border-box流式布局 flow layout弹性布局 flex layout HTML CSS网格布局 grid layout HTML CSS
按钮html适配手机失败..........
梦境虽美,却不长.
07-24 353
【代码】按钮html适配手机失败..........
Bootstrap入门指南
"Bootstrap1111 - Bootstrap官方文档" Bootstrap是世界上最受欢迎的前端开发框架之一，由Twitter的开发者创建并开源。它提供了一系列预先设计的CSS和JavaScript组件，用于快速构建响应式、移动优先的网页。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值