bootstrap前端框架的简单使用

最新推荐文章于 2019-12-31 16:26:30 发布
最新推荐文章于 2019-12-31 16:26:30 发布
阅读量565 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lenux2017/article/details/78021217
版权 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 移动设备优先 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 禁用缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- bootstrap -->
<link rel="stylesheet" href="/js/bootstrap3/css/bootstrap.css">
<link rel="stylesheet" href="/js/bootstrap3/css/bootstrap-theme.css">
<script type="text/javascript" src="/js/bootstrap3/js/bootstrap.js"></script>
<title>Insert title here</title>
</head>
<body>
<!-- navbar-fixed-top滚动时，一直悬浮顶部；navbar-static-top 固定顶部； navbar-inverse反色 -->
  	<nav class="navbar navbar-default  navbar-static-top navbar-inverse">
	  <div class="container-fluid">
	    <div class="navbar-header">
	      <a class="navbar-brand" href="#">
	        使用范例
	      </a>
	    </div>
	  </div>
	</nav>
	
	<div class="container-fluid">
			<!-- 12栅格布局	列表组 -->
		<div class="col-xs-2">
			<ul class="list-group">
			  <li class="list-group-item">Cras justo odio</li>
			  <li class="list-group-item">Dapibus ac facilisis in</li>
			  <li class="list-group-item">Morbi leo risus</li>
			  <li class="list-group-item">Porta ac consectetur ac</li>
			  <li class="list-group-item">Vestibulum at eros</li>
			  <li class="list-group-item">Cras justo odio</li>
			  <li class="list-group-item">Dapibus ac facilisis in</li>
			  <li class="list-group-item">Morbi leo risus</li>
			  <li class="list-group-item">Porta ac consectetur ac</li>
			  <li class="list-group-item">Vestibulum at eros</li>
			  <li class="list-group-item">Cras justo odio</li>
			  <li class="list-group-item">Dapibus ac facilisis in</li>
			  <li class="list-group-item">Morbi leo risus</li>
			  <li class="list-group-item">Porta ac consectetur ac</li>
			  <li class="list-group-item">Vestibulum at eros</li>
			  <li class="list-group-item">Cras justo odio</li>
			  <li class="list-group-item">Dapibus ac facilisis in</li>
			  <li class="list-group-item">Morbi leo risus</li>
			  <li class="list-group-item">Porta ac consectetur ac</li>
			  <li class="list-group-item">Vestibulum at eros</li>
			</ul>
		</div>
		
<!-- 		面板组件 -->
		<div class="col-xs-10">
			<div class="panel panel-default">
			  <div class="panel-heading">面板标题</div>
			  <div class="panel-body">
<!-- 			  水平排列表单 -->
			  	<form class="form-horizontal">
<!-- 			  		表单组 -->
			  		<div class="form-group">
<!-- 			  		这里lable中的for参数与id一致 -->
					    <label for="goodsName" class="col-sm-1 control-label">商品名称</label>
					    <div class="col-sm-5">
					      <input type="text" class="form-control" id="goodsName" placeholder="请输入商品名称">
					    </div>
					    <label for="goodsPrice" class="col-sm-1 control-label">商品价格</label>
					    <div class="col-sm-5">
					      <input type="text" class="form-control" id="goodsPrice" placeholder="请输入商品价格">
					    </div>
					 </div>
					 
			  		<div class="form-group">
<!-- 			  		这里lable中的for参数与id一致 -->
					    <label for="goodsType" class="col-sm-1 control-label">商品类型</label>
					    <div class="col-sm-5">
					        <select class="form-control">
							  <option>1</option>
							  <option>2</option>
							  <option>3</option>
							  <option>4</option>
							  <option>5</option>
							</select>
					    </div>
					    <label for="goodsPrice" class="col-sm-1 control-label">生产时间</label>
					    <div class="col-sm-5">
<!-- 					    	组合两个输入框，一个图标 -->
						    <div class="input-group">
						      <input type="text" class="form-control" id="goodsPrice" placeholder="请输入商品价格">
							     	<span class="input-group-addon">
							     		<i class="glyphicon glyphicon-calendar"></i>
							     	</span>
						      <input type="text" class="form-control" id="goodsPrice" placeholder="请输入商品价格">
						    </div>
					    </div>
					 </div>
					 <div class="form-group">
					 	<div class="col-sm-12">
<!-- 			按钮的其他样式btn-default primary success info warning danger link等样式 -->
							<div class="text-center">
						 		<button class="btn btn-primary" type="button">
						 			<i class="glyphicon glyphicon-search"></i>
						 		搜索
						 		</button>
						 		<button class="btn btn-danger" type="button">
						 			<i class="glyphicon glyphicon-repeat"></i>
						 		重置
						 		</button>
					 		</div>
					 	</div>
					 </div>
			  	</form>
			  </div>
			</div>
			<div class="table-responsive">
			<!-- 			鼠标悬停变色 边框带线 行之间颜色间隔 -->
			  <table class="table table-hover table-bordered table-striped">
<!-- 			  tr的样式success warning info active danger -->
			    <tr class="success">
			    	<td>商品名称</td>
			    	<td>商品类型</td>
			    	<td>商品价格</td>
			    	<td>商品时间</td>
			    	<td>是否热销</td>
			    	<td>上架状态</td>
			    </tr>
			    <tr class="warning">
			    	<td>iphone</td>
			    	<td>3C</td>
			    	<td>8888</td>
			    	<td>2017-09-13</td>
			    	<td>0</td>
			    	<td>1</td>
			    </tr>
			    <tr class="danger">
			    	<td>iphone</td>
			    	<td>3C</td>
			    	<td>8888</td>
			    	<td>2017-09-13</td>
			    	<td>0</td>
			    	<td>1</td>
			    </tr>
			    <tr class="info">
			    	<td>iphone</td>
			    	<td>3C</td>
			    	<td>8888</td>
			    	<td>2017-09-13</td>
			    	<td>0</td>
			    	<td>1</td>
			    </tr>
			    <tr class="active">
			    	<td>iphone</td>
			    	<td>3C</td>
			    	<td>8888</td>
			    	<td>2017-09-13</td>
			    	<td>0</td>
			    	<td>1</td>
			    </tr>
			    <tr>
			    	<td>iphone</td>
			    	<td>3C</td>
			    	<td>8888</td>
			    	<td>2017-09-13</td>
			    	<td>0</td>
			    	<td>1</td>
			    </tr>
			  </table>
<!-- 			  分页 -->
				<div class="text-center">
					<ul class="pagination">
						<li>
							<a href="#">
								<span>«</span>
							</a>
						</li>
						<li>
							<a href="#">1</a>
						</li>
						<li>
							<a href="#">2</a>
						</li>
						<li>
							<a href="#">3</a>
						</li>
						<li>
							<a href="#">4</a>
						</li>
						<li>
							<a href="#">5</a>
						</li>
						<li>
							<a href="#">
								<span>»</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

</body>
</html>

Lenux2017
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap前端框架的入门使用
AtlantisChina
10-12 583
Bootstrap前端框架的介绍和使用入门。
Bootstrap前端框架-快速上手
一头秃发丶的博客
04-21 496
目录什么是bootstrap为什么使用bootstrap库中包含的内容环境安装CSS 列偏移 col-md-6 col-md-offset-3 列排序 （左到右）col-md-4 col-md-push-8， （右到左）col-md-8 col-md-pull-4 内联子标题 <h1>我是标题<small>我是副标题</small></h1> 更...
简洁优美的前端框架-Bootstrap
calm_encode的博客
03-11 1008
 Bootstrap概述：Bootstrap发布于2011年8月，是一个基于HTML5,CSS3,JavaScript的开源框架，该框架代码简洁，视觉优美，可用于快速，简单地构架基于PC及移动端设备的Web页面需求。它的出现是为了解决前端开发任务中的协作通协作统一问题。它通过响应式布局使得它能够兼容PC端，PAD端以及手机移动端的页面访问。简而言之，Bootstrap是简单，灵活的用于搭建WEB页...
label标签的for属性要指向input的id属性一致
qq_36235046的博客
12-31 1893
html: <input class="a" id="one" type="text"></input> <div class="a" id="two">eeeeeeee</div> <label for="one">点我试试!!</label> ...
前端框架Bootstrap
scbiaosdo的博客
07-10 353
什么是 Bootstrap？Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。Bootstrap有何而来？Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。为什么使用 B...
BootStrap前端框架使用方法详解
10-15
主要介绍了BootStrap前端框架使用方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Bootstrap前端框架 4.3.1
09-30
Bootstrap是最受欢迎的HTML、CSS和JS的前端开发框架，用于开发响应式布局、移动设备优先的WEB项目。它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式。 Bootstrap 4.3.1 更新日志
Bootstrap前端框架1
08-08
【Bootstrap前端框架1】 Bootstrap 是一个流行的开源前端框架，它为开发者提供了丰富的组件和样式，以便快速构建响应式和移动设备优先的网站。Bootstrap 的核心特性包括网格系统、排版、表格、表单、按钮、图像、...
Bootstrap前端框架 4.4.1
02-17
Bootstrap前端框架4.4.1是开发者们广泛使用的HTML、CSS和JavaScript库，它极大地简化了Web开发过程，尤其在创建响应式、移动优先的网站时。这个版本的Bootstrap不仅继承了其先前版本的优点，还引入了一些新的特性和...
html，jsp中，背景全屏
Lenux2017的博客
08-23 2586
*****
style中设置隐藏元素
Lenux2017的博客
08-24 2387
通常用于ajax模态窗口，先写好，隐藏，调用时弹出对话框。 模态窗口的写法参见本blog
富文本编辑器的用法
Lenux2017的博客
08-28 709
var editor; KindEditor.ready(function(K) { editor = K.create('textarea[name="stuInfo"]', { uploadJson: "JS/kindeditor-4.1.10/jsp/upload_json.jsp", fileManagerJson: "JS/kindeditor-
多表联查，不通过many-to-one的方法
Lenux2017的博客
08-29 582
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here 展示页面 ${list} id 电影名称 上映地区 上映时间 类型
uploadify异步文件上传插件的用法
Lenux2017的博客
08-28 309
学生形象预览: //AJAX 异步 上传文件 不保存数据 $("#uploadImg").uploadify({ //插件自带 不可忽略的参数flash插件 'swf': '/JS/uploadify/uploadify.swf', //前台请求后台的url 不可忽略的参数 ****** '
JavaScript 音乐播放器及其源代码.zip
07-22
项目：带有源代码的 JavaScript 音乐播放器 JavaScript 音乐播放器是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这个项目很有趣。在这里，用户可以通过单击不同颜色的图块来播放不同类型的曲调，并欣赏音乐的声音。此外，用户可以像钢琴一样使用它们来生成不同的曲调。   项目制作 音乐播放器项目仅包含 HTML、CSS 和 JavaScript。谈到该系统的功能，用户可以播放不同类型的音乐。您只需单击不同颜色的图块即可收听音乐。该项目包含大量 JavaScript，用于使项目正常运行。 如何运行该项目？ 要运行此项目，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要运行此系统，首先，通过单击 index.html 文件在浏览器中打开项目。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
鸿蒙开发健康app案例
07-22
该项目是记录用户日常饮食情况，以及针对不同食物摄入营养不同会有对应的营养摄入情况和日常运动消耗情况，用户可以自己添加食品以及对应的热量。 主要有登陆界面，饮食统计页面，食物列表页 登陆界面首先是进入欢迎界面，然后加载首选项，用户同意授权进入首页，否则弹出用户协议，同意保存首选项，否则就跳出app 饮食统计界面，进入首页之后，用户可以选择日期和获取当前日期来加载饮食记录，饮食记录会展示热量统计，营养统计和分组展示饮食记录 食物列表页展示食物列表以及可以填写食物数量和跳转到食物详情页
1_2_1_pointcloud_based_occupancy_gride_map.launch.py
07-22
1_2_1_pointcloud_based_occupancy_gride_map.launch.py
USB教程与源码.rar
最新发布
07-22
USB教程与源码.rar

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值