学习笔记4

最新推荐文章于 2024-04-16 10:16:13 发布

SZX33

最新推荐文章于 2024-04-16 10:16:13 发布

阅读量119

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_46353089/article/details/115214241

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

学习目标：

学习并掌握bootstrap

学习内容：

Bootstrap介绍：Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

1、Bootstrap 代码
第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。
第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。
请确保当您使用 <pre> 和 <code> 标签时，开始和结束标签使用了 unicode 变体： < 和 >。
2、Bootstrap 页面标题（Page Header）
页面标题（Page Header）是个不错的功能，它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。
3、Bootstrap 导航栏
导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。
4、Bootstrap 下拉菜单（Dropdowns）
下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与下拉菜单（Dropdown） JavaScript 插件的互动来实现。
5、Bootstrap 列表组
本章我们将讲解列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下：
向元素 <ul> 添加 class .list-group。
向 <li> 添加 class .list-group-item。
6、Booststrap 表格
（1）<table> 为表格添加基础样式。
（2）<thead> 表格标题行的容器元素（<tr>），用来标识表格列。
（3）<tbody> 表格主体中的表格行的容器元素（<tr>）。
（4）<tr> 一组出现在单行上的表格单元格的容器元素（<td> 或 <th>)。
（5）<td> 默认的表格单元格。
（6）<th> 特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。
（7）<caption> 关于表格存储内容的描述或总结。
7、Bootstrap 多媒体对象（Media Object）
Bootstrap 中的多媒体对象（Media Object），如：图像、视频、音频等。多媒体对象的样式可用于创建各种类型的组件，我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。

学习产出：

Bootstrap代码：
1、页面标题

<!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="page-header">
		    <h1>work
		        <small>108</small>
		    </h1>
		</div>
		<p>GE丶3.X</p>

	</head>
	<body>
	</body>
</html>

2、导航栏

<!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>
		
		<nav class="navbar navbar-default" role="navigation">
			<div class="container-fluid">
			<div class="navbar-header">
				<a class="navbar-brand" href="#">work1</a>
			</div>
			<div>
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">姓名</a></li>
					<li><a href="#">GE丶3.X</a></li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							爱好
							<b class="caret"></b>
						</a>
						<ul class="dropdown-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>
							<li class="divider"></li>
							<li><a href="#">另一个分离的链接</a></li>
						</ul>
					</li>
				</ul>
			</div>
			</div>
		</nav>

	</head>
	<body>
	</body>
</html>

3、下拉菜单

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 下拉菜单（Dropdowns）</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="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
			data-toggle="dropdown">
		主题
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
		</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
		</li>
	</ul>
</div>

</body>
</html>

4、列表组

<!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>

<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">评价</li>
	<li class="list-group-item">查看快递</li>
</ul>

5、多媒体对象

<!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="container">
  <h2>多媒体对象</h2>
  <p>使用 "media-left" 类来设置多媒体对象左对齐。文本内容需要放在图片之后。</p>
  <p>"media-right" 类用于设置多媒体对象右对齐。</p><br>
  
  <!-- 左对齐 -->
  <div class="media">
    <div class="media-left">
      <img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:60px">
    </div>
    <div class="media-body">
      <h4 class="media-heading">左对齐</h4>
      <p>个人介绍<p>
    </div>
  </div>
  <hr>
  
  <!-- 右对齐 -->
  <div class="media">
    <div class="media-body">
      <h4 class="media-heading">右对齐</h4>
      <p>个人介绍</p>
    </div>
    <div class="media-right">
      <img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:60px">
    </div>
  </div>
</div>

</body>
</html>