首页 > 其他分享 >69_2Bootstrap

69_2Bootstrap

时间：2025-01-03 10:25:39浏览次数：7  
标签：布局 xxxx 2Bootstrap 表格 标签 Bootstrap 按钮 69

Bootstrap

学习可用依据其官网提供的或者菜鸟教程之类(http://www.runoob.com/bootstrap/bootstrap-tutorial.html)

概念

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

优点

1.移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。

2.浏览器支持：所有的主流浏览器都支持 Bootstrap。

3.容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。

4.响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。

Bootstrap安装环境

1.下载Bootstrap（http://getbootstrap.com/ ）

2.导入：注意它们的顺序是有序的，有关联

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

常用控件

其实就是提供class加上就有设定的样式，对于一般的开发完全够用，而且样式是可以叠加的

标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></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>
		
		<span class="label label-default">默认标签</span>
		<span class="label label-primary">主要标签</span>
		<span class="label label-success">成功标签</span>
		<span class="label label-info">信息标签</span>
		<span class="label label-warning">警告标签</span>
		<span class="label label-danger">危险标签</span>
		
	</body>
</html>

B标签

图片

<!--圆角-->
		<img src="../img/星空一花.jpg" class="img-rounded"/>
		<!--圆型-->
		<img src="../img/星空一花.jpg" class="img-circle"/>
		<!--缩略图-->
		<img src="../img/星空一花.jpg" class="img-thumbnail"/>

B图片

列表组

<div class="list-group" style="width: 300px;">
			<a href="#" class="list-group-item active">xxxx</a>
			<a href="#" class="list-group-item">xxxx</a>
			<a href="#" class="list-group-item">xxxx</a>
			<a href="#" class="list-group-item">xxxx</a>
			<a href="#" class="list-group-item">xxxx</a>
		</div>

鼠标悬浮会有灰色
B列表组

表格

	
		<!--
			<table class="table">
  			<caption>基本的表格布局</caption>
			
			<table class="table table-condensed">
  			<caption>精简表格布局</caption>
  			
  			<table class="table table-striped">
  			<caption>条纹表格布局</caption>
  			
  			<table class="table table-bordered">
  			<caption>边框表格布局</caption>
			
			<table class="table table-hover">
 	  		<caption>悬停表格布局</caption>
        -->
        <table class="table table-hover">
 	  		<caption>悬停表格布局</caption>
		  	<thead>
		    	<tr>
			      	<th>名称</th>
			      	<th>年龄</th>
			      	<th>性别</th>
		    	</tr>
		  	</thead>
		  	<tbody>
			    <tr>
			      <td>小红</td>
			      <td>18</td>
			      <td>女</td>
			    </tr>
			    <tr>
			      <td>小黄</td>
			      <td>19</td>
			      <td>男</td>
			    </tr>
			    <tr>
			      <td>小绿</td>
			      <td>20</td>
			      <td>男</td>
			    </tr>
			  </tbody>

精简表格布局相对于基本布局就是字体大小、行间距之类变化，条纹就是固定设置的隔行换色，边框就是设置边框，悬停变灰色就是鼠标移入移出事件
B表格

表单(输入框、密码框、单选、多选、下拉、各种按钮)

<form class="form-horizontal " role="form" >
		  	<div class="form-group">
			    <label class="col-sm-2 control-label">输入框：</label>
			    <div class="col-sm-10 col-lg-4">
			      <input type="text" class="form-control" placeholder="请输入输入框">
			    </div>
			</div>
		  	<div class="form-group">
			    <label class="col-sm-2 control-label">密码框：</label>
			    <div class="col-sm-10 col-lg-4">
			      <input type="password" class="form-control" placeholder="请输入密码框">
			    </div>
			 </div>
			 
			<div class="form-group">
			    <label class="col-sm-2 control-label">单选框：</label>
			    <div class="radio col-sm-10">
			    	<label>
			        	<input name="sex" type="radio" checked="checked">选项 1
			        </label>
			        <label>
			        	<input name="sex" type="radio" >选项 2
			        </label>
			    </div>
		    </div>
		    
		    <div class="form-group">
			    <label class="col-sm-2 control-label">多选框：</label>
			    <div class="col-sm-10">
				    <label class="checkbox-inline">
				        <input type="checkbox"> 选项 1
				    </label>
				    <label class="checkbox-inline">
				        <input type="checkbox"> 选项 2
				    </label>
				    <label class="checkbox-inline">
				        <input type="checkbox"> 选项 3
				    </label>
			    </div>
		   	</div>
		    
		    <div class="form-group">
			    <label class="col-sm-2 control-label">下拉链表：</label>
			    <div class=" col-sm-10 col-lg-4">
				    <select class="form-control ">
					    <option>1</option>
					    <option>2</option>
					    <option>3</option>
					    <option>4</option>
					    <option>5</option>
				    </select>
			    </div>
		    </div>
		    
		  	<div class="form-group">
			    <div class="col-sm-offset-2 col-sm-10">
			      <button type="submit" class="btn btn-default">提交按钮</button>
			      <button type="reset" class="btn btn-default">重置按钮</button>
			      <button type="button" class="btn btn-default">普通按钮</button>
			    </div>
		  	</div>
		</form>

表单比我们没加样式好看，输入框选中变深色，下拉列表，按钮选中变灰色之类
B表单

模态框

<!-- 按钮触发模态框 -->
		<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
		            </div>
		            <div class="modal-body">在这里添加一些文本</div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="fun01()">关闭</button>
		                <button type="button" class="btn btn-primary" onclick="fun02()">提交更改</button>
		            </div>
		        </div>
		    </div>
		</div>		
		<script type="text/javascript">
			function fun01(){
				alert("no");
			}
			function fun02(){
				alert("yes");
			}
		</script>

点击按钮的弹框
B模态框

可视化定制

就是优点中提到的响应式设计,官网提供
https://www.bootcss.com/p/layoutit/
拖动布局，拖动添加组件、样式之类，再进行对应的修改，进行页面的设计
可视化布局

标签：布局,xxxx,2Bootstrap,表格,标签,Bootstrap,按钮,69
From： https://blog.csdn.net/gangain/article/details/141086238

相关文章

  • SSM考务管理系统-毕业设计源码04769
    摘要从20年代开始，计算机疯狂的出现在人们的生活以及工作当中，成为人们生活、工作的好帮手，计算机深入到每家每户当中，网络办公，网络教学更是替换了传统手工记录管理的方式，使用计算机办公可以不必局限于固定的时间和固定的地点，通过计算机系统可以轻松实现跨区域的交流。随着高等......
  • 基于springboot+vue的物流管理系统_91758695_053
    收藏关注不迷路！！......
  • ssm校内二手商城交易系统+vue（10769）
     有需要的同学，源代码和配套文档领取，加文章最下方的名片哦一、项目演示项目演示视频二、资料介绍完整源代码（前后端源代码+SQL脚本）配套文档（LW+PPT+开题报告）远程调试控屏包运行三、技术介绍Java语言SSM框架SpringBoot框架Vue框架JSP页面Mysql数据库IDEA/Eclipse开发四、项......
  • Sublime Text 4 4169 下载及安装教程
    不得不说sublime是轻量化IDE性能王者，比vscode要快不少，不过vscode如今胜在生态。下面正式开始pojie教程！ 补丁已经放到网盘了，需要的自取。download：SublimeText44169 首先x64dbg载入sublime_text.exe主程序，shift+F9跑起来 先找个最明显的点入手，例如点击帮助->关于......
  • P4694 [PA2013] Raper
    P4694[PA2013]Raper题目描述你需要生产\(k\)张光盘。每张光盘都要经过两道工序：先在A工厂进行挤压，再送到B工厂涂上反光层。你知道每天A、B工厂分别加工一张光盘的花费。你现在有\(n\)天时间，每天可以先送一张光盘到A工厂（或者不送），然后再送一张已经在A工厂加工过的......
  • 169. 多数元素
    多数元素给定一个大小为n的数组nums，返回其中的多数元素。多数元素是指在数组中出现次数大于⌊n/2⌋的元素。你可以假设数组是非空的，并且给定的数组总是存在多数元素。示例1：输入：nums=[3,2,3]输出：3示例2：输入：nums=[2,2,1,1,1,2,2]输出：2思路方法一：直接排序......
  • P2669 [NOIP2015 普及组] 金币
    在看了一圈后发现题解比较少，思考过程和用到的知识也偏复杂，这里用比较简单的方法写了一篇题解题目背景NOIP2015普及组T1题目描述国王将金币作为工资，发放给忠诚的骑士。第一天，骑士收到一枚金币；之后两天（第二天和第三天），每天收到两枚金币；之后三天（第四、五、六天），每天收到三枚金......
  • springboot个人健康信息管理小程序-计算机设计毕业源码07695
    摘要在当今这个数字化、信息化的时代，个人健康管理已成为人们生活中不可或缺的一部分。随着生活节奏的加快，越来越多的人开始关注自己的身体状况，希望能够及时了解并调整自己的生活习惯，以达到最佳的健康状态。为此，我们开发了一款基于SpringBoot的个人健康信息管理小程序，旨在为......
  • 【Qualcomm】IPQ5018获取TR069 WiFi 接口Stats状态方法
    IPQ5018简介    IPQ5018是高通（Qualcomm）公司推出的一款面向网络设备的系统级芯片（SoC）。它通常用于路由器、接入点和其他网络设备中，提供高性能的无线网络连接。以下是关于IPQ5018的一些关键特性和功能：关键特性高性能处理器IPQ5018集成了多核CPU，通常是ARM架构，......
  • 169. 大学生HTML5期末大作业 ―【鲸鱼动物主题精品网页 （5页）】 Web前端网页制作 html5+
    目录一、网页概述二、网页文件三、网页效果四、代码展示1.html2.CSS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强欢迎来到我的CSDN主页！Web前端网页制作、大学生期末大作业、课程设计、毕业设计、网页模版源码、学习资料等，更多优质博客文章、网......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99