`

Bootstrap 第8章 输入框和导航组件

 
阅读更多 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>输入框和导航组件</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 100px;">

<div class="input-group">
	<span class="input-group-addon">@</span>
	<input type="text" class="form-control">
</div>
<br>
<div class="input-group">
	<input type="text" class="form-control">
	<span class="input-group-addon">@163.com</span>
</div>
<br>
<div class="input-group">
	<span class="input-group-addon">$</span>
	<input type="text" class="form-control">
	<span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group">
	<span class="input-group-addon"><input type="checkbox"></span>
	<input type="text" class="form-control">
</div>
<br>
<div class="input-group">
	<input type="text" class="form-control">
	<div class="input-group-btn">
		<button class="btn btn-default">提交</button>
	</div>
</div>
<br>
<div class="input-group">
	<span class="input-group-addon"><input type="checkbox"></span>
	<input type="text" class="form-control">
</div>
<br>
<div class="input-group">
	<input type="text" class="form-control">
	<div class="input-group-btn">
		<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
			下拉菜单 <span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li class="dropdown-header">网站导航</li>
			<li><a href="###">首页</a></li>
			<li><a href="###">资讯</a></li>
			<li><a href="###">产品</a></li>
			<li class="divider"><a href="###">产品</a></li>
			<li class="disabled"><a href="###">关于</a></li>
		</ul>
	</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

 效果图：

 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>输入框和导航组件</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 200px;">

<ul class="nav nav-tabs">
	<li class="active"><a href="#">首页</a></li>
	<li><a href="#">资讯</a></li>
	<li><a href="#">产品</a></li>
	<li><a href="#">关于</a></li>
</ul>
<br>
<ul class="nav nav-pills">
	<li class="active"><a href="#">首页</a></li>
	<li><a href="#">资讯</a></li>
	<li><a href="#">产品</a></li>
	<li><a href="#">关于</a></li>
</ul>
<br>
<ul class="nav nav-pills nav-stacked">
	<li class="active"><a href="#">首页</a></li>
	<li><a href="#">资讯</a></li>
	<li><a href="#">产品</a></li>
	<li><a href="#">关于</a></li>
</ul>
<br>
<ul class="nav nav-tabs nav-justified">
	<li class="active"><a href="#">首页</a></li>
	<li><a href="#">资讯</a></li>
	<li><a href="#">产品</a></li>
	<li><a href="#">关于</a></li>
</ul>
<br>
<ul class="nav nav-tabs nav-justified">
	<li class="active"><a href="#">首页</a></li>
	<li><a href="#">资讯</a></li>
	<li><a href="#">产品</a></li>
	<li class="dropdown">
		<a href="###" data-toggle="dropdown">
			下拉菜单
			<span class="caret"></span>
		</a>
		<ul class="dropdown-menu">
			<li><a href="#">菜单一</a></li>
			<li><a href="#">菜单二</a></li>
			<li><a href="#">菜单三</a></li>
		</ul>
	</li>
	<li><a href="#">关于</a></li>
</ul>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

 效果图：

 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>输入框和导航组件</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!-- <nav class="navbar navbar-default">
	导航
</nav>
<nav class="navbar navbar-inverse">
	导航
</nav> -->

<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
			<a href="##" class="navbar-brand">标题</a>
		</div>
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">首页</a></li>
			<li><a href="#">资讯</a></li>
			<li class="disabled"><a href="#">产品</a></li>
			<li><a href="#">关于</a></li>
		</ul>
		<form action="###" class="navbar-form navbar-right">
			<div class="input-group">
				<input type="text" class="form-control">
				<div class="input-group-btn">
					<button class="btn btn-default">提交</button>
				</div>
			</div>
		</form>
		<button class="btn btn-default navbar-btn navbar-left">按钮</button>
		<p class="navbar-text">我是一段文本<a href="##" class="navbar-link">链接</a></p>

	</div>
</nav>
<div style="height: 10000px;"></div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

 效果图：

 

 

 

 

  • 大小: 50.8 KB
  • 大小: 12.8 KB
  • 大小: 56.8 KB
分享到：
| Bootstrap 第7章 图标菜单和按钮组件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    BootStrap实战 源码第3章

    6. **表单**：BootStrap的表单组件提供了预定义的样式，使表单元素如输入框、选择框、复选框和单选按钮等看起来更加一致和美观。同时，了解如何使用表单验证提高用户体验。 7. **警告提示**：理解如何使用警告...

    李炎恢bootstrap3.pdf合并版带目录

    第一章 bootstrap介绍 第二章 排版样式 第三章 表格和按钮 第四章 表单和图片 第五章 栅格系统 第六章 辅助类和响应式工具 第七章 图标菜单按钮...第八章 输入框和导航组件 .............共二十章，后面带开发实例！

    ACCP8.0Y2Web前端框架与移动应用开发第三章Bootstrap组件

    这个ACCP8.0 Y2的Web前端框架与移动应用开发课程的第三章主要聚焦于Bootstrap组件的使用，旨在帮助学生深入理解如何构建美观且用户友好的网页。 Bootstrap的核心特性包括一个响应式的栅格系统，预定义的CSS样式，...

    bootstrap案例

    3. **导航**：Bootstrap的导航组件包括导航条（Navbar）、面包屑导航（Breadcrumbs）、页签（Tabs）和 pills，它们为网站提供清晰的导航结构，同时保持一致的视觉风格。 4. **按钮和按钮组**：Bootstrap的按钮设计...

    BootStrap3.3.5 不同的Demo 和插件集合

    11. **组件和插件**：除了上述组件，Bootstrap还包含许多其他有用的功能，如工具提示（`tooltip`）、弹出框（`popover`）、滚动监听（`scrollspy`）和 affix 等。在压缩包中，你可能会找到一些第三方插件，如...

    视频案例-1.初识Bootstrap_美联英语_视频案例-1.初识Bootstrap_

    Bootstrap是由Twitter开发并开源的，它提供了一系列预先设计的CSS样式、JavaScript组件和字体图标，使得开发者可以快速地创建具有现代感的网页设计。在本课程中，你将了解到以下关键知识点： 1. **响应式设计**：...

    《BootStrap开发技术》课程标准.docx

    Bootstrap 组件、Bootstrap 字体图标、Bootstrap 下拉菜单、Bootstrap 按钮组、Bootstrap 按钮下拉菜单、Bootstrap 输入框组、Bootstrap 导航元素、Bootstrap 导航栏、Bootstrap 面包屑导航、Bootstrap 分页、...

    bootstrap总结与例子

    Bootstrap是世界上最受欢迎的前端开发框架，它为开发者提供了丰富的组件、样式和JavaScript插件，用于快速构建响应式和移动优先的网站...在实际项目中，应根据具体需求灵活运用这些组件和特性，以实现最佳的用户体验。

    bootStrap精美模板

    通过这个BootStrap精美模板，你可以学习到如何有效地利用Bootstrap的网格系统、响应式设计、组件和JavaScript插件来构建专业且美观的网站。对于初学者，这是一个极好的学习资源；对于经验丰富的开发者，它可以作为一...

    《BootStrap实战》随书源码第5章

    Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件、响应式布局和易于使用的预定义样式，大大简化了网页开发的过程。《BootStrap实战》这本书深入浅出地介绍了如何利用Bootstrap构建现代、...

    bootstrap的前端页面设计

    5. **Forms**：Bootstrap的表单组件提供了一套预设的样式和布局，包括输入框、选择器、复选框和按钮。它们在各种设备上都能保持一致的显示效果，并且易于定制。 6. **Gallery**：Bootstrap的图片和媒体组件帮助创建...

    Bootstrap视频教程，实战开发后台管理系统 11

    在这个第11集的视频教程中，讲师可能会深入讲解如何通过Bootstrap的组件和工具来优化后台界面设计，提升用户体验。 Bootstrap的核心特性包括响应式布局、移动优先的设计哲学和一套丰富的预定义样式，如网格系统、...

    bootstrap3-editable

    Bootstrap3是其第三个主要版本，它强调简洁、直观且强大的开发工具和响应式设计。 2. **行内编辑**：行内编辑是指在表格中直接编辑单元格内的数据，用户可以点击某一单元格进行修改，而无需离开当前视图。这对于...

    Bootstrap3中文文档

    Bootstrap3是其第三个主要版本，强调移动优先，提供了丰富的预定义样式、组件和JavaScript插件，使得开发者能够快速构建美观且功能齐全的网页。 在Bootstrap3的中文文档中，你可以找到以下关键知识点： 1. **栅格...

    BootStrap 完整的后台管理框架

    总之，BootStrap 后台管理框架是构建高效、美观的Web管理界面的利器，它通过丰富的组件和响应式设计，降低了开发难度，提高了开发效率。而"BootStrap 完整的后台管理框架"则是一个集大成者，为开发者提供了全面的...

    bootstrap网页前端框架

    这个框架由Twitter的开发者创建，旨在简化Web开发过程，提供一套预先设计的组件和样式，使得开发者能够快速构建美观且功能强大的网页。Bootstrap的核心特性包括网格系统、表单元素、导航、按钮、图标等，同时它还...

    简洁扁平化风格bootstrap响应式社交音乐网站

    通过这个模板，开发者不仅可以学习到如何利用Bootstrap构建一个美观的音乐社交网站，还能深入理解响应式设计和扁平化设计的理念，同时掌握各种网页组件的使用技巧。对于希望提升网站设计和开发能力的人来说，这是一...

    bootstrap教程

    Bootstrap教程涵盖了前端开发中常用的组件和工具，是一个全方位的指导材料。这个框架是Twitter开发的，主要用于加速响应式网页设计和移动优先的项目。Bootstrap以其简洁、直观和强大的设计哲学，已经成为全球开发者...

    Bootstrap 4 Site Blueprints and cookbook(pdf)

    Bootstrap 4 是一个广泛使用的前端开发框架，由Twitter开发并维护，它提供了丰富的预设样式、组件和JavaScript插件，帮助开发者快速构建响应式、移动优先的网站和应用程序。本资源包含两本书籍：《Bootstrap 4 Site ...

Magicbox
Global site tag (gtag.js) - Google Analytics