Bootstrap 组件练习



<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


<html lang="en">


<head>


<meta http-equiv="X-UA-Compatible" content="IE=edge">


<meta name="viewport" content="width=device-width, initial-scale=1">


<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">


<title>hello bootstrap</title>


<!-- 载入bootstrap压缩CSS -->


<link rel="stylesheet" href="../css/bootstrap.min.css">


</head>


<body>


<div>


<h1>你好，世界！</h1>


<!-- 载入glyphicon图标 -->


<span class="glyphicon glyphicon-search">搜索</span></br>


<span class="glyphicon glyphicon-camera">拍照</span></br>


<span class="glyphicon glyphicon-circle-arrow-down">下载</span></br>


<!-- 基本按钮显示 -->


<button type=“button” class="btn btn-default">默认灰色按钮</button>


<button type=“button” class="btn btn-primary">蓝色</button>


<button type=“button” class="btn btn-info">信息</button>


<button type=“button” class="btn btn-success">成功</button>


<button type=“button” class="btn btn-warning">警告</button>


<button type=“button” class="btn btn-danger">危险</button></br>


<a class="btn btn-primaty" href="#" role="button">用a标签必须确定role为button</a>


<!-- 按钮大小控制 -->


<button type=“button” class="btn btn-default btn-lg">默认灰色按钮</button>


<button type=“button” class="btn btn-primary">蓝色</button>


<button type=“button” class="btn btn-info btn-sm">信息</button>


<button type=“button” class="btn btn-success">成功</button>


<button type=“button” class="btn btn-warning btn-xs">警告</button>


<button type=“button” class="btn btn-danger">危险</button>


<button type=“button” class="btn btn-link">link</button>


<!-- 按钮像父块一样大-->


<button type=“button” class="btn btn-primary btn-lg btn-block">block level button</button>


<button type=“button” class="btn btn-default btn-lg btn-block">block level button</button>


<!-- 按钮禁用 -->


<button type=“button” class="btn btn-success disabled="disabled">成功</button>


<button type=“button” class="btn btn-warning disabled="active">警告</button></br>


<!-- 图标载入按钮，看起来有图标文字的按钮 -->


<button type=“button” class="btn btn-primary disabled="disabled"><span class="glyphicon glyphicon-play-circle


" ></span>&nbsp&nbsp 播放</button></br>


<button type=“button” class="btn btn-primary disabled="disabled"><span class="glyphicon glyphicon-earphone


" ></span>&nbsp&nbsp打电话</button></br>


<!-- 按钮一般下拉菜单 -->


<div class="btn-group">


<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1"


aria-haspopup="false" aria-expanded="false">省份<span class="caret"></span>


</button>


<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">


<li><a href="#">浙江</a></li>


<li class="disabled"><a href="#">江苏</a></li>


<li><a href="#">广东</a></li>


<li role="separator" class="divider"></li>


<li><a href="#" onclick="window.close()">山东</a></li>


</ul>


</div>


<!-- Single button -->


<div class="btn-group">


<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">


Action  <span class="caret"></span>


</button>


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


</div> </br>


<div class="btn-group" role="group">


<!-- <div class="btn-group-vertical" role="group"> -->


<div class="btn-group" role="toolbar">


<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1"


aria-haspopup="false" aria-expanded="false">省份<span class="caret"></span>


</button>


<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">


<li><a href="#">浙江</a></li>


<li class="disabled"><a href="#">江苏</a></li>


<li><a href="#">广东</a></li>


<li role="separator" class="divider"></li>


<li><a href="#" onclick="window.close()">山东</a></li>


</ul>


</div>


<div class="btn-group" role="toolbar">


<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1"


aria-haspopup="false" aria-expanded="false">城市<span class="caret"></span>


</button>


<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">


<li><a href="#">杭州</a></li>


<li class="disabled"><a href="#">宁波</a></li>


<li><a href="#">青岛</a></li>


<li role="separator" class="divider"></li>


<li><a href="#" onclick="window.close()">温州</a></li>


</ul>


</div>


<div class="btn-group" role="toolbar">


<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1"


aria-haspopup="false" aria-expanded="false">区域<span class="caret"></span>


</button>


<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">


<li><a href="#">西湖区</a></li>


<li class="disabled"><a href="#">海曙区</a></li>


<li><a href="#">崂山区</a></li>


<li role="separator" class="divider"></li>


<li><a href="#" onclick="window.close()">鹿城区</a></li>


</ul>


</div>


<div class="btn-group" role="toolbar">


<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1"


aria-haspopup="false" aria-expanded="false">街道<span class="caret"></span>


</button>


<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">


<li><a href="#">莫干山路</a></li>


<li class="disabled"><a href="#">宁波路</a></li>


<li><a href="#">崂山东路</a></li>


<li role="separator" class="divider"></li>


<li><a href="#" onclick="window.close()">五马街</a></li>


</ul>


</div>


</div>


<!-- 按钮分裂式下拉菜单-->


<div class="btn-group dropup">


<div class="btn-group">


<button type="button" class="btn btn-warning">省份</button>


<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1"


aria-haspopup="false" aria-expanded="false">


<span class="caret"></span>


<span class="sr-only">Toggle Dropdown</span>


</button>


<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">


<li><a href="#">浙江</a></li>


<li class="disabled"><a href="#">江苏</a></li>


<li><a href="#">广东</a></li>


<li role="separator" class="divider"></li>


<li><a href="#" onclick="window.close()">山东</a></li>


</ul>


</div>


<div class="btn-group" role="toolbar">


<button type="button" class="btn btn-warning">城市</button>


<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1"


aria-haspopup="false" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span>


</button>


<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">


<li><a href="#">杭州</a></li>


<li class="disabled"><a href="#">宁波</a></li>


<li><a href="#">青岛</a></li>


<li role="separator" class="divider"></li>


<li><a href="#" onclick="window.close()">温州</a></li>


</ul>


</div>


<div class="btn-group" role="toolbar">


<button type="button" class="btn btn-warning">区域</button>


<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1"


aria-haspopup="false" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span>


</button>


<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">


<li><a href="#">西湖区</a></li>


<li class="disabled"><a href="#">海曙区</a></li>


<li><a href="#">崂山区</a></li>


<li role="separator" class="divider"></li>


<li><a href="#" onclick="window.close()">鹿城区</a></li>


</ul>


</div>


<div class="btn-group" role="toolbar">


<button type="button" class="btn btn-warning">街道</button>


<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">


<span class="caret"></span>


<span class="sr-only">Toggle Dropdown</span>


</button>


<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">


<li><a href="#">莫干山路</a></li>


<li class="disabled"><a href="#">宁波路</a></li>


<li><a href="#">崂山东路</a></li>


<li role="separator" class="divider"></li>


<li><a href="#" onclick="window.close()">五马街</a></li>


</ul>


</div>


</div>


</div>


</div>


<!-- 顺序载入jquery库并且加载bootstrap压缩js库 -->


<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>


<script src="../js/bootstrap.min.js"></script>


</body>


</html>  -->
				


				
时间： 2024-10-11 07:31:56 

		


		


	

	
	

		


		
Bootstrap 组件练习的相关文章


						

		

			

                bootstrap学习笔记--bootstrap组件
			

		

		

									

				前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 Bootstrap--表格 Bootstrap--表单 Bootstrap--按钮 Bootstrap--图片 Bootstrap--辅助类 Bootstrap--响应式实用工具 Bootstrap--字体图标 Bootstrap--下拉菜单 Bootstrap--按钮组 Bootstrap--按钮下			

		

	

				

		

			

                ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件
			

		

		

									

				Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉菜单.导航.警告框.弹出框.输入框组等.在你的Web Application中使用这些组件,将为用户提供一致和简单易用的用户体验. Bootstrap组件本质上是结合了各种现有Bootstrap元素以及添加了一些独特Class来实现.Bootstrap元素我在上一篇文章中涉及到,具体可以参考<ASP.NET MVC使用Bootstrap系列(2)——使用Bootstrap CSS和HTML元素>. 在这篇博客中,我将继续探索B			

		

	

				

		

			

                【转】JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）
			

		

		

									

				前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己一人独享,没办法,谁让博主这么爱分享呢~~ 本文原创地址:http://www.cnblogs.com/landeanfen/p/5603790.html 七.多值输入组件manifest 关于文本框的多值输入,一直是一个比较常见的需求,今天博主推荐一款好用的多值输入组件给大家,不要谢我,请叫我“红			

		

	

				

		

			

                Bootstrap 组件中的导航条
			

		

		

									

				先查看效果: 该导航条可以适应不同尺寸的页面(如手机屏幕.电脑屏幕)   实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor			

		

	

				

		

			

                Bootstrap 组件中的分页条
			

		

		

									

				先查看效果: 实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de			

		

	

				

		

			

                Bootstrap组件之导航条
			

		

		

									

				.navbar--设置nav元素为导航条组件: .navbar-default--指定导航条组件为默认主题: .navbar-inverse--指定导航条组件为黑色主题: .navbar-fixed-top--设置导航条组件固定在顶部: .navbar-fixed-bottom--设置导航条组件固定在底部: .container-fluid--设置宽度充满父元素,即为100%: .navbar-header--主要指定div元素为导航条组件包裹品牌图标及切换按钮: .navbar-toggle-			

		

	

				

		

			

                JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐
			

		

		

									

				前言:之前分享过很多bootstrap常用组件,包括表格.表单验证.文件上传.复选下拉框.弹出框等.这段时间,博主又收藏了一些好用的组件(有些在项目中已经用起来了),经过两天的时间,已经整理出了一部分,本着“好东西要与人分享”的原则,今天还是来点福利,将博主收藏的东西分享出来,供需要的园友参考.组件大部分都是些开源组件,也有部分是博主自己在网上找到然后改写出来的效果,可能不尽如人意,有兴趣的且看看吧. 一.时间组件 bootstrap风格的时间组件非常多,你可以在github上面随便搜索“dat			

		

	

				

		

			

                Bootstrap组件之警告框
			

		

		

									

				.alert--指明div元素为警告框组件: .alert-info..alert-danger..alert-warning..alert-success--给警告框设置情景效果: .alert-dismissible--提示该警告框组件为可关闭的: .close--设置按钮为可关闭: .alert-link--可以为链接设置与当前警告框相符的颜色: <!DOCTYPE html> <html lang="en"> <head> <meta			

		

	

				

		

			

                Bootstrap组件之导航
			

		

		

									

				.nav--指定列表元素为导航组件. .nav-tabs--指定导航组件的样式为标签页: .nav-pills--指定导航组件的样式为胶囊式标签页: .nav-stacked--指定标签页的样式为垂直堆叠排列: .nav-justified--指定标签页的样式为两端对齐: .disabled--设置导航栏组件的菜单项为禁用样式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo			

		

	

				

		

			

                Bootstrap组件之well、标签
			

		

		

									

				把 Well 用在元素上,能有嵌入(inset)的的简单效果. .well--指定div为well组件. .well-sm.well-lg--指定well适用的屏幕分辨率: <!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=&q