信息管理创新实践学习周记4

最新推荐文章于 2022-05-01 13:05:47 发布

芝芝莓莓少少冰

最新推荐文章于 2022-05-01 13:05:47 发布

阅读量165

点赞数

分类专栏：信息管理创新实践学习笔记

本文链接：https://blog.csdn.net/weixin_48813559/article/details/118396567

版权

信息管理创新实践学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

信息管理创新实践学习周记4

Bootstrap学习

Bootstrap学习

Bootstrap简介

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT。

知识点

Bootstrap按钮下拉菜单

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 基本的按钮下拉菜单</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="btn-group">
	<button type="button" class="btn btn-default dropdown-toggle" 
			data-toggle="dropdown">
		默认 <span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">功能</a></li>
		<li><a href="#">另一个功能</a></li>
		<li><a href="#">其他</a></li>
		<li class="divider"></li>
		<li><a href="#">分离的链接</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始 
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">功能</a></li>
		<li><a href="#">另一个功能</a></li>
		<li><a href="#">其他</a></li>
		<li class="divider"></li>
		<li><a href="#">分离的链接</a></li>
	</ul>
</div>

</body>
</html>

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

导航栏

表格导航或标签
步骤：
带有 class .nav 的无序列表
添加 class .nav-tabs

<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 标签式的导航菜单</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>

</body>
</html>

基本的胶囊式导航菜单

垂直的胶囊式导航菜单

两端对齐的导航

表格

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 基本的表格</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table">
	<caption>表格</caption>
   <thead>
      <tr>
         <th>姓名</th>
         <th>学号</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>lsm</td>
         <td>110</td>
      </tr>
      <tr>
         <td>llsm</td>
         <td>111</td>
      </tr>
   </tbody>
</table>

</body>
</html>

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

芝芝莓莓少少冰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
信息管理创新实践学习周记4

信息管理创新实践学习周记4Bootstrap学习Bootstrap简介知识点Bootstrap按钮下拉菜单导航栏基本的胶囊式导航菜单垂直的胶囊式导航菜单两端对齐的导航表格Bootstrap学习Bootstrap简介Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT。知识点Bootstrap按钮下拉菜单<!DOCTYPE html><html><head> <m
复制链接

扫一扫