前端08-BootStrap

最新推荐文章于 2022-09-18 11:36:42 发布
最新推荐文章于 2022-09-18 11:36:42 发布
阅读量168 收藏
点赞数
分类专栏： 前端 文章标签： bootstrap html jquerybootstrap jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oykj525915/article/details/111935719
版权

中文官网

地址：http://www.bootcss.com/

下载与使用

1. 下载：
    http://v3.bootcss.com/getting-started/
2. 下载完成后
    拷⻉ dist/css 中的 bootstrap.min.css 到项⽬ css 中
    拷⻉ dist/js 中的 bootstrap.min.js 到项⽬的 js 中
3. 下载 jquery.js
    http://jquery.com/
4.把文件放到项目里
5.引入外部链接 
<link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.css"/>

布局容器

1、.container 类用于固定宽度并支持响应式布局的容器。
2、.container-fluid类用于100% 宽度，占据全部视口（viewport）的容器。

<!-- 固定宽度-->
<div class="container" style="height: 50px; background-color: pink;"></div>
		
<!-- 100%宽度 -->
<div class="container-fluid" style="height: 50px; background-color: #0275D8;"></div>

 

 栅格网格系统

行row 列 column
行：.row
列：col-xs-列数  col-sm-列数  col-md-列数   col-lg-列数
                
列组合
       列组合简单理解就是更改数字来合并列（原则：列总和数不能超12，大于12,则自动换到下一行。），有点类似于表格的colspan属性。


列偏移
       让列之间产生一些间隙  col-md-offset
                    
列排序
       列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。
       在Bootstrap框架的网格系统中是通过添加类名 col-md-push-* 和 col-md-pull-*  (其中星号代表移动的列组合数)。往前pull，往后push。
                    
列嵌套
       Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列.

<div class="container">
			<div class="row">
				<div class="col-md-1" style="background-color: #006699;">1</div>
				<div class="col-md-2" style="background-color: #00CC00;">2</div>
				<div class="col-md-5" style="background-color: #003300;">5</div>
				<div class="col-md-5" style="background-color: #0269C2">5</div>
			</div>
			<hr >
			<!-- 列偏移 -->
			<div class="row">
				<div class="col-md-1 col-md-offset-1" style="background-color: #006699;">1</div>
				<div class="col-md-2 col-md-offset-1" style="background-color: #00CC00;">2</div>
				<div class="col-md-5" style="background-color: #003300;">5</div>
			</div>
			<hr >
			<!-- 列排序 -->
			<div class="row">
				<div class="col-md-1 col-md-push-1" style="background-color: #006699;">1</div>
				<div class="col-md-2 col-md-push-1" style="background-color: #00CC00;">2</div>
				<div class="col-md-5" style="background-color: #003300;">5</div>
			</div>
			
			<hr >
			<!-- 列嵌套 -->
			<div class="row">
				<div class="col-md-1" style="background-color: #006699;">1</div>
				<div class="col-md-2" style="background-color: #00CC00;">
					<div class="row">
						<div class="col-md-1" style="background-color: red;">1</div>
					</div>
				</div>
				<div class="col-md-5" style="background-color: #003300;">5</div>
			</div>
		</div>

 

排版

<!-- 标题 -->
		<h1>bootstrap 哈哈<small>副标题</small></h1>
		bootstrap 哈哈<div class="h1">bootstrap 哈哈<span class="small">副标题</span></div>
		
		<!-- 段落 -->
		<p class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努力</em>的<strong>你</strong></p>
		
		<!-- 强调 -->
		<div class="text-muted">提示效果</div>
		<div class="text-primary">主要效果</div>
		<div class="text-success">成功效果</div>
		<div class="text-info">信息效果</div>
		<div class="text-warning">警告效果</div>
		<div class="text-danger">危险效果</div>
		
		<!-- 对齐效果 -->
		<p class="text-left">我居左</p>
		<p class="text-center">我居中</p>
		<p class="text-right">我居右</p>
		<p class="text-justify">
			网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份
		</p>
		
		<!-- 去点样式 -->
		<ul class="list-unstyled">
		    <li>无序项目列表一</li>
			<li>无序项目列表二</li>
		</ul>
		
		<!-- 水平/内联列表 -->
		<ul class="list-inline">
			<li>首页</li>
			<li>java学院</li>
			<li>在线课堂</li>
		</ul>
		
		<!-- 定义列表 -->
		<dl class="dl-horizontal">
		    <dt>HTML 超文本标记语言</dt>
		    <dd>HTML称为超文本标记语言，是一种标识性的语言。</dd>		   
		    <dt>测试标题不能超过160px的宽度,否则2个点</dt>
		    <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果。</dd>
		</dl>
		
		<!-- 代码 -->
		<code>System.out.println("hello");</code>
		<pre>
			public static void main(String[] args){
				System.out.println("hello");
			}
		</pre>
		<!-- 快捷键 -->
		保存：<kbd>ctrl</kbd> + <kbd>s</kbd>
		
		<button class="btn">按钮</button>
		
		
		<button class="btn btn-primary btn-xs">超小按钮.btn-xs</button>
		<button class="btn btn-primary btn-sm">小型按钮.btn-sm</button>
		<button class="btn btn-primary">正常按钮</button>
		<button class="btn btn-primary btn-lg">大型按钮.btn-lg</button> 
		
		<button class="btn btn-danger disabled" disabled="disabled">禁用按钮</button>

运行截图：

表单

<form class="form-horizontal" role="form">
			<div class="form-group">
				<label for="email" class="control-label col-sm-2">邮箱</label>
				<div class="col-sm-10">
					<input type="email" class="form-control" placeholder="请输入邮箱"/>
				</div>
			</div>
			<div class="form-group">
				<label for="pwd" class="control-label col-sm-2">密码</label>
				<div class="col-sm-10">
					<input type="pwd" class="form-control" placeholder="请输入密码" />
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2">
					<div class=" checkbox">
						<label>
							<input type="checkbox" />记住密码
						</label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button class="btn btn-default">提交</button>
				</div>
			</div>
		</form>

表格

<table class="table table-bordered table-striped table-hover" >
		  <caption>基本的表格布局</caption>
		  <thead>
		    <tr class="success">
		      <th>名称</th>
		      <th>城市</th>
		    </tr>
		  </thead>
		  <tbody>
		    <tr class="info">
		      <td>Tanmay</td>
		      <td>Bangalore</td>
		    </tr>
		    <tr>
		      <td>Sachin</td>
		      <td>Mumbai</td>
		    </tr>
		  </tbody>
		  <tbody>
		    <tr >
		      <td>Tanmay</td>
		      <td>Bangalore</td>
		    </tr>
		    <tr>
		      <td>Sachin</td>
		      <td>Mumbai</td>
		    </tr>
		  </tbody>
		  <tbody>
		    <tr >
		      <td>Tanmay</td>
		      <td>Bangalore</td>
		    </tr>
		    <tr>
		      <td>Sachin</td>
		      <td>Mumbai</td>
		    </tr>
		  </tbody>
		</table>

缩略图和面板

<div class="panel panel-success">
			<div class="panel-heading">
				<h2>明星投票系统</h2>
			</div>
			<div class="panel-body">
				<div class="row">
					<div class="col-md-3">
						<div class="thumbnail">
							<img src="img/gyy.jpg" alt="...">
							<h3>高圆圆</h3>
							<p>出生于北京市，中国内地影视女演员、模特。</p>
							<button class="btn btn-default">
								<span class="glyphicon glyphicon-heart"></span>喜欢</button>
							<button class="btn btn-info">
								<span class="glyphicon glyphicon-pencil"></span>评论
							</button>
						</div>
					</div>
					
					<div class="col-md-3">
						<div class="thumbnail">
							<img src="img/gyy.jpg" alt="...">
							<h3>高圆圆</h3>
							<p>出生于北京市，中国内地影视女演员、模特。</p>
							<button class="btn btn-default">
								<span class="glyphicon glyphicon-heart"></span>喜欢</button>
							<button class="btn btn-info">
								<span class="glyphicon glyphicon-pencil"></span>评论
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>

导航

<link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.min.css"/>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap/dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
       <body>
		<p>标签式的导航菜单</p>
		<ul class="nav nav-tabs">
		  <li class="active"><a href="#">Home</a></li>
		  <li><a href="#">SVN</a></li>
		  <li><a href="#">iOS</a></li>
		  <li><a href="#">VB.Net</a></li>
		  <li><a href="#">Java</a></li>
		  <li><a href="#">PHP</a></li>
		</ul>
		
		<p>基本的胶囊式导航菜单</p>
		<ul class="nav nav-pills">
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">SVN</a></li>
			<li><a href="#">iOS</a></li>
			<li><a href="#">VB.Net</a></li>
			<li><a href="#">Java</a></li>
			<li><a href="#">PHP</a></li>
		</ul>
		<p>分页导航</p>
		<ul class="pagination">
			<li><a href="#">&laquo;</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="#">&raquo;</a></li>
		</ul>
		
		<ul class="pager">
		    <li><a href="#">Previous</a></li>
		    <li><a href="#">Next</a></li>
		</ul>
	</body>

下拉菜单

<body>
		<!--使用一个类名为dropdown,默认向下dropdown，向上弹起加入 . dropup 即可-->
		<div class="dropdown ">
			<!--使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性-->
			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
				喜欢频道 <span class="glyphicon glyphicon-signal"></span>
				<!--下拉箭头-->
			</button>
			<!--下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu-->
			<ul class="dropdown-menu">
				<!--dropdown-menu-right右对齐-->
				<!--分组标题: li 添加类名 “dropdown-header” 来实现分组的功能-->
				<li class="dropdown-header">----科普----</li>
				<li>
					<a href="#">人与自然</a>
				</li>
				<!--分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能-->
				<li class="divider"></li>
				<li class="dropdown-header">----搞笑----</li>
				<li>
					<a href="#">欢乐喜剧人</a>
				</li>
				<li>
					<a href="#">快乐大本营</a>
				</li>
				<li class="divider"></li>
				<li class="disabled">
					<!--禁用状态-->
					<a href="#">生活大爆炸</a>
				</li>
			</ul>
		</div>
	</body>

模态框

<body>
		<h2>创建模态框（Modal）</h2>
		<!-- 按钮触发模态框 -->
		<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">关闭</button>
		                <button type="button" class="btn btn-primary">提交更改</button>
		            </div>
		        </div><!-- /.modal-content -->
		    </div><!-- /.modal -->
		</div>
	</body>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

@欧阳先生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
配列 java_java 配列排序
weixin_29116255的博客
02-13 377
privatestaticvoidselectionSort(inta[],intn)要求要使用这个对A进行排列(这相当与C里面的函数？)MAIN函数里面INT3个配列，并进行适当的初期话，然后打出3个配列的元素，在打出被排...private static void selectionSort(int a[], int n)要求要使用这个对A进行排列(这相当与C里面的函数？)MAIN函数里面IN...
前端项目-bootstrap-drawer.zip
09-03
【前端项目-bootstrap-drawer.zip】是一个前端开发资源包，主要关注的是使用Bootstrap框架来实现抽屉式导航的设计。Bootstrap是一款广泛使用的开源HTML、CSS和JS框架，它为开发者提供了丰富的预定义组件，使得构建...
Java组合列
weixin_51686373的博客
10-21 91
列组合 ​ 列组合简单理解就是更改数字来合并列（原则：列总和数不能超12，大于12,则自动换到下一行。），有点类似于表格的colspan属性。 <div class="container"> <div class="row"> <div class="col-md-4">4列</div> <div class="col-md-8">8列</div> </div> <div clas
jxl实例
笨小孩
01-04 146
import jxl.*; import jxl.write.*; import java.io.*; import java.io.File.*; import java.util.*; public class excel { public static void main(String[] args) { String targetfile = "c:/out.xls";//输出...
BootStrap基本使用
最新发布
m0_60027772的博客
09-18 2万+
html超文本标记语言，多出来的html为超文本标记语言，是一种标识性语言css为层叠样式表css为层叠样式表，为前端三剑客之一
配列 java_java8 stream sorted
weixin_39618173的博客
02-19 313
1.对象类型配列List list = Arrays.asList(new Person(22, "shaomch", "man"),new Person(26, "mike", "wemon"),new Person(24, "tom", "wemon"),new Person(22, "tom", "wemon"));//升序排列List list1 = list.stream().sorte...
前端项目-tempusdominus-bootstrap-4.zip
09-03
前端项目-tempusdominus-bootstrap-4,一个日期/时间选择器组件，设计用于引导4和momentjs。关于使用、安装和演示，请参见Github上的项目站点
前端项目-awesome-bootstrap-checkbox.zip
09-03
在前端开发领域，Bootstrap是一个非常流行且功能丰富的框架，它为构建...这使得"awesome-bootstrap-checkbox"成为了一个实用的前端资源，对于那些追求细节和完善用户体验的开发者来说，是一个值得收藏和使用的工具。
前端项目-pwstrength-bootstrap.zip
09-03
在"jquery.pwstrength.bootstrap-master"这个压缩包中，包含了以下主要文件和目录： 1. `dist/`：包含编译后的CSS和JS文件，可以直接在项目中引用。 2. `src/`：源代码目录，可以在这里找到未压缩和未混淆的...
前端项目-twitter-bootstrap.zip
09-02
在压缩包`bootstrap-master`中，通常包含了Bootstrap的源码文件，如Sass（CSS预处理器）文件、JavaScript源码、字体图标、示例页面等。开发者可以查看这些文件以了解其工作原理，并根据需要进行修改。 总结，...
java数组初期化方式
zhaozekun2015的博客
07-29 770
java数组初期化方式 数组的初期化方式，注意了多维数组的初始化方式2长度可以不同；java多维数组特点          方式1：int[]in = new int[10];          方式2：int[]in = new int[]{1,2,3,4,5};  //  int[]in = {1,2,3,4,5};           方式1： int[][]in = new in...
java配列add,java配列add
weixin_39882870的博客
03-16 160
java配列add[2021-02-08 00:42:33]简介:php去除nbsp的方法：首先创建一个PHP代码示例文件；然后通过“preg_replace("/(\s|\&nbsp\;|　|\xc2\xa0)/", " ", strip_tags($val));”方法去除所有nbsp即可。推荐：《PHP视频教java正则表达式匹配字符串的方法：使用tostring，代码为【whil...
配列 java_JAVA言语入6-1次元配列
weixin_32821043的博客
02-19 167
该楼层疑似违规已被系统折叠隐藏此楼查看此楼class test {public static void main(String args[]) {int ary[];ary = new int[5];ary[0] = 10;ary[1] = 20;ary[2] = 30;ary[3] = 40;ary[4] = 50;System.out.println("配列0番の内容 = " + ary[0...
java配列add,Java day 14
weixin_34450111的博客
03-16 152
###1、Set集合的特点： (1)无序(存储和读取的顺序有肯不一样)； (2)不允许重复(要求元素唯一)； (3)没有索引 ###2、HashSet有三种遍历集合对象的方式： (1)转换成数组； (2)迭代器； (3)增强for 例： package com.itheima; import java.util.HashSet; import java.util.Iterator; import ...
java cell自动适应内容_POI cell的宽度自适应
weixin_42174098的博客
02-16 3721
POI是apache提供的一个读写Excel文档的开源组件，在操作excel时常要合并单元格，合并单元格的方法是：sheet.addMergedRegion(new CellRangeAddress(1, 1, 0, 2));自适应列宽度：sheet.autoSizeColumn(1);sheet.autoSizeColumn(1, true);这两种方式都是自适应列宽度，但是注意这个方法在后边的...
POI 实现合并单元格以及列自适应宽度
鹰击长空
07-27 2510
POI是apache提供的一个读写Excel文档的开源组件，在操作excel时常要合并单元格，合并单元格的方法是： sheet.addMergedRegion(new CellRangeAddress(1, 1, 0, 2)); 自适应列宽度： sheet.autoSizeColumn(1);  sheet.autoSizeColumn(1, true); 这两种方式都是自适应列宽...
java导出excel，某几列合并单元格。
丨灬坏蛋er丨的博客
12-24 6002
如图： 导出的功能，就不在这里做过多的解释了。如果最后一行是合计，或者其他的内容。例如： 如上图所示。那么只要把此方法写在【合计】前方就好 // 合并【学员姓名】之前相同的列表 mergeContent(sheet); // 合计 // ...... private void mergeContent(XSSFSheet sheet) { boolean f...
5.Web设计文档1
08-08
前端则采用Bootstrap，一个流行的HTML、CSS和JS框架，用于快速创建响应式和移动优先的网站。数据库选用MySQL，一个广泛使用的开源关系型数据库，提供了稳定性和性能。数据访问层通过JDBCTemplate来操作数据库，它是...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值