bootstrap当中，实现一些常用的元素居中

最新推荐文章于 2024-03-12 12:00:00 发布
最新推荐文章于 2024-03-12 12:00:00 发布
阅读量267 收藏
点赞数
文章标签： java
原文链接：http://www.cnblogs.com/DeepRunning/p/9205987.html
版权

在 bootstrap当中，实现居中，咱们可以大体分3类：


  • 文本内容居中：利用bootstrap自带CSS样式表当中 的   text-center 样式来实现。

         代码实现

注意，此处引用了

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


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 't1.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
    <link rel="stylesheet" href="/baidu/css/bootstrap.min.css"type="text/css"/>
  </head>
  
  <body>    
 		<div class="container"> 
  		    <div class="row"  > 
  	                 <div class="text-center ">
  	                   <p>文本内容居中：利用bootstrap自带CSS样式表当中 的   text-center 样式来实现。   </p>
  	                 </div>
  		    </div>
  		</div>  
  </body>
</html>
参考图片：

  • 图片居中：利用bootstrap自带CSS样式表当中 的  center-block  样式来实现。

代码实现：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 't1.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
    <link rel="stylesheet" href="/baidu/css/bootstrap.min.css"type="text/css"/>
  </head>
  <body>   
  
  <div class="container"> 
  	<div class="row"  > 
  	      <img class="center-block" alt="" src="img/1.jpg"> 			    			
    	</div>  <!-- /input-group -->  			
  </div>	

  </body>
</html>

参考图片



  • 其他类型元素居中：利用bootstrap列偏移的概念。

    在实现其他类型的元素居中时，咱们可以用到bootstrap当中网格的概念：首先网格最多是显示12列，多余的就会切换到下一行，咱们要设定居中，意味着，要设置内容所占网格的大小，并且利用列偏移

       列偏移：使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用* 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

代码实现： 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 't1.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
    <link rel="stylesheet" href="/baidu/css/bootstrap.min.css"type="text/css"/>
  </head>
  
  
   
  
  <body>   
  
  <div class="container"> 
  	<div class="row"  >  	      
  			<div class="col-md-6 col-md-offset-3"> 			
    			<div class="input-group" display：block;margin：0 auto;>   						  	 
      						<input type="text" class="form-control " placeholder="Search for...">
     						 <span class="input-group-btn">    				 
        					<button class="btn btn-info btn-search " type="button" >百度一下</button>
     						 </span>
     			
    			</div><!-- /input-group -->  			
  			</div><!-- /.col-lg-6 --> 
  	</div>
  </div>  
  

  </body>
</html>

代码解释：

<div class="col-md-6 col-md-offset-3">

设定目标所占的列数为6列，偏移数为3相当于   3,6,3 的格式呈现，也即实现了居中表示

参考图片：



转载于:https://www.cnblogs.com/DeepRunning/p/9205987.html

Marlon1993
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用bootstrap的H5页面登录框自适应水平居中、垂直居中
07-18
总的来说，实现Bootstrap的H5页面登录框自适应水平居中和垂直居中，需要对Bootstrap的栅格系统、CSS布局技术（如Flexbox或Grid）以及可能的JavaScript/jQuery处理有一定理解。通过灵活运用这些技术，你可以创建出...
bootstrp中如何让整个布局居中？
qq_42224274的博客
10-12 5144
在bootstrap中实现元素居中的方法主要有这几种： 1.加类.text-center（子元素居中） 2.加类.center-block（自身居中） 3.利用bootstrap中列偏移的概念。例如：col-md-offset-2(外边距向右偏移两列) ---来源于：https://www.cnblogs.com/lzccheng/p/bootstrap_001.html 示例（本人实践...
Bootstrap5（display显示、flex布局相关属性、浮动、定位、文本、栅格系统）
最新发布
Luo3255069063的博客
03-12 1894
Bootstrap5（display显示、flex布局相关属性、浮动、定位、文本、栅格系统）
Bootstrap5简单实现登录页：上下左右居中
土味儿
06-28 4078
Bootstrap简单实现登录页；上下左右居中。
Bootstrap登录框自适应水平居中+垂直居中
热门推荐
shenzhen_zsw的专栏
07-18 4万+
用户登录 /*web background*/ .container{ display:table; height:100%; } .row{ disp
bootstrap table合并行数据并居中对齐效果
10-17
Bootstrap Table 是一个基于 Bootstrap 框架的前端组件，用于...通过以上步骤，你就可以在 Bootstrap Table 中实现合并行数据并居中对齐的效果。这种方法不仅有助于优化表格的布局，还能提高用户阅读和理解信息的效率。
bootstrap模态框垂直居中效果
11-27
Bootstrap模态框（Modal）是网页设计中常用的一种交互元素，用于展示临时信息或进行一些交互操作，如登录、注册等。在Bootstrap框架下，模态框默认是居中的，但在某些情况下，可能由于自定义样式或者不同屏幕尺寸的...
bootstrap 模态框（modal）实现水平垂直居中显示
11-28
Bootstrap模态框（Modal）是该框架中一个非常重要的组件，它用于创建弹出式的对话框，通常包含一些额外的信息或交互元素。然而，在实际应用中，开发者可能会遇到一些定制需求，比如让模态框在页面中水平垂直居中显示...
Bootstrap模态框水平垂直居中与增加拖拽功能
09-01
总的来说，实现Bootstrap模态框的水平垂直居中和拖拽功能需要结合CSS和JavaScript技术。通过上述方法，我们可以创建出既美观又实用的模态框，提升用户体验。在实际项目中，你可以根据需求调整这些代码，例如添加动画...
2. Bootstrap样式
wxhua420701325的博客
10-24 2773
一、栅格系统1.实现原理2.Bootstrap 网格的基本结构 二、使用步骤1.引入库2.读入数据总结Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备尺寸的增加，系统会自动分为最多12列。通过定义容器大小，平分为12份，再调整内外边距，最后结合媒体查询，制作出强大的响应式栅格系统。 以上代码实现效果： 其中：.container 固定宽度，并将布局居中 .row 使用“行（row）”在水平方向创建一组“列（column）” 栅格系统中
针对bootstrap内联单选框input与文字不能居中对齐的解决办法
weixin_30920853的博客
03-24 1049
1.html代码 <div > <label class="checkbox-inline first-label"> <input type="radio" name="getOption" id="option1" value="option1" checked>张三 </label&gt...
前端使用bootstrap的栅格实现居中对齐
qq_18547341的博客
09-07 3762
我们可以灵活的使用bootstrap框架中的栅格来实现居中对齐等排布方式 思路：12个栅格，左边留1个空白，中间显示内容占10个，右边就留了1个空白栅格，自然就居中对齐了 前端代码： <div class="row"> <div class="col-sm-1"></div> <div class="col-sm-10"> <div class="ibox f
Bootstrap表格内容居中
xujing19920814的博客
01-11 3617
<th style='text-align: center;'>host</th> 水平居中 <td rowspan=$row_host1 style='vertical-align: middle;'>host1</td> 垂直居中 <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>hello<
bootstrap 垂直居中 布局_Bootstrap 4 栅格系统垂直布局
weixin_39770821的博客
12-23 825
关键词：bootstrap 4，vertical alignment，grid systerm问题：按照Bootstrap 4 官方文档的说明。应用.align-items-center可以使元素垂直居中：Bootstrap 4 垂直居中示例.png官方示例代码：One of three columnsOne of three columnsOne of three columnsOne of t...
学习 Bootstrap 5 之 Position 和 Shadows
qq_37354060的博客
01-19 1070
学习 Bootstrap 5 之 层定位 和 阴影层定位 (Position)1. 层顶位方式 (Position values)2. 元素排列 (Arrange elements)(1). 属性(2). 值(3). 使用3. 元素居中化 层定位 (Position) Bootstrap 5 官方文档 1. 层顶位方式 (Position values) 定位方式 类 固定定位 .position-fixed 相对定位 .position-relative 绝对定位 .positio
Bootstrap当中，实现一些常用的元素居中
小生一介草民的博客
08-27 976
1.文本内容居中：利用bootstrap自带CSS样式表当中 的 text-center样式来实现。 首先要引入css文件 <link rel="stylesheet" href="/baidu/css/bootstrap.min.css"type="text/css"/> 然后给需要居中的文本内容添加一个class类 class= “text-center” 这样就...
BOOTSTRAP4的栅格系统详解
shanzhihang的专栏
01-04 2550
简介 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。 网格类 Bootstrap 4 网格系统有以下 5 个类: .col- 针对所有设备 .col-sm- 平板 - 屏幕宽度等于或大于 576px .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px 列与列间
2020-10-09
weixin_43131807的博客
10-09 221
元素水平垂直居中 1.行内元素的水平垂直居中；通过在父元素中设置text-align，让子元素的文本进行居中；然后通过line-height属性让子元素的行高等于父元素的高度。 2.不定宽高父元素时的块级元素的水平垂直居中（最常用）；通过postition:absolute进行绝对定位，然后用百分比设置top和left；再用margin-left和margin-top消除子元素宽高的一半偏移量。 3.定宽高父元素时的块级...
Bootstrap框架中元素水平居中
04-01
在CSS中使用flexbox布局可以轻松实现元素的水平居中，例如： <div class="d-flex justify-content-center">Hello World! 这里的d-flex类表示使用flexbox布局，justify-content-center类表示水平居中。 4. 使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值