a按钮居中显示 bootstrap_BootStrap概述（一）

最新推荐文章于 2023-09-07 16:53:29 发布
最新推荐文章于 2023-09-07 16:53:29 发布
阅读量150 收藏
点赞数
文章标签： a按钮居中显示 bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39932455/article/details/112125661
版权

@[toc]

BootStrap概述（一）

1、什么是BootStrap

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

图解：

c33ae235841e1266e1555c50ce8ffc98.png

2、BootStrap的好处是什么

传统的使用HTML+CSS+JavaScript开发的网站兼容性差，当使用移动设备打开对应的网页的时候，会因为分辨率的不同，导致出现显示效果极其的差。比如下图：

9ca6930376bbe402d1d934bf3a99e129.png

当把它进行缩放的时候：

f7d2b5c51b33ee60924bdac5ca8bb7b1.png

可以发现，一些部件都叠在一起了。导致了显示的效果极差。而BootStrap的出现就解决了这样的问题，因为它实现了响应式的布局效果：

0c415b66bd1a6c23a70f1ad35139a287.png

大大改善了开发的效率和降低了维护成本。上面使用的BootStrap改写上面的黑马商城，使用电脑打开：

a807c57788cd9eda9cbdb46579cf0f2c.png

下面缩放到ipad的大小和手机的大小来看：

1、ipad的大小：

8d141787f34821848a55acbb3b15f2ba.png

2、手机的大小：

8bd2ad39d6221e8b976578e7a2c0bdd1.png

1d085618f94242d92d1e199ecf4d0b47.png

所以其中的好处我们是可以看得见的。

总结好处就是：

  • 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
  • 响应式布局，使得开发成本和维护成本都降低

3、搭建BootStrap的开发环境

  • 下载BootStrap（https://v3.bootcss.com/）

c5fb6a0d70ae585cb12b002167287671.png
  • 导入相关文件(bootstrap.js、bootstrap.css、jquery.js即可)

8a0497bfdf4bcba2dbe72a82eb09a249.png

导入完成以后，我们以后使用BootStrap都是使用基本模板了。

基本模板

```html <!DOCTYPE html> <!--这个标记很重要，分开讲： viewport：指的是浏览器网页的视口， width=device-width：表示移动设备生效 initial-scale：页面的缩放比例，通常默认为1，数值从1~5，即100%到500%的比例。分正负数

除了这上面的标记属性，还有三个属性：
      1、minimum-scale：最小允许的缩放比例
      2、maximum-scale：最大的允许缩放比例
      3、user-scalable:no ,不允许缩放，一旦设置，则上面的1，2，属性失效。

  -->

  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>使用BootStrap的基本模板</title>

  <!-- Bootstrap -->
  <link href="../css/bootstrap.css" rel="stylesheet">
  <script src="../js/jquery-1.12.0.js"></script>
  <script src="../js/bootstrap.min.js"></script>

  <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
  <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
  <!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>-->
  <!--[endif]-->

你好，世界！

```

## 4、BootStrap布局容器

BootStrap的使用必须需要至少一个**布局容器**，才能为页面进行封装和方便的样式控制。它相当于一个画板。

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

| 容器类样式 | 描述 | | --------------- | ------------------------------------------------------------ | | contianer | 类用于固定宽度并支持响应式布局的容器。【特点：居中，两端留白】实际例子<div class="container">....</div>| | container-fluid | 类用于100%的宽度，占据全部的视口（viewport）。<div class="container-fluid">..</div>|

**实战例子**

打开idea，新建一个文档，代码如下：

```html <!DOCTYPE html> 

<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery-1.12.0.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
  </head>
<body>  
      <div class="container" style="border: 1px double red">11111</div>     
</body>
</html>

```

实际效果，1111居中且两端留白：

64719f73b312e49d1a1aff8e7a42af1c.png

下面使用container-fluid：

html <div class="container-fluid" style="border:1px double red">11111</div>

实际效果，100% 宽度，占据全部视口（viewport）的容器：

1490ec42b74eacf92c3a3c223ef933a6.png

更加详细的用法我们可以查询帮助手册：官网——全局CSS样式——布局容器

c0218c4a8f86a776ad6e88c6e0f28143.png

865afdbd8b6edf7141fd167b891879a8.png

## 5、栅格系统

### 5.1、BootStrap的栅格系统

打开全局CSS样式——栅格系统，介绍如下：

18d38bbdd2f077c7fd6e809d6a5ea827.png

c918a8f99721259a24ffd48ad734fa3c.png

一个效果图：

d9c59b4e4ad486d27d79d00bf7e67b77.png

### 5.2、BootStrap的栅格系统入门案例

代码 html <div class="container-fluid" style="border: 1px double red"> <div class="row"><!--第一个行，自动分割为12列--> <div class="col-lg-4">第一个元素占据4列</div> <div class="col-lg-4">第二个元素占据4列</div> <div class="col-lg-4">第三个元素占据4列</div> </div> </div>

可以看见，一行12列，放了三个div，每个div占据了4列。

a6d01742da156000ebe294eb8f2b55b6.png

下面，我们对上面的视口缩放：

afe19384d7ff0061561d81b8ea21d9ed.png

可以发现，一旦缩放，由于对应的屏幕尺寸的显示方式没有设置，导致我们的每个元素独自显示一行。

### 5.3、BootStrap的栅格系统的特点及深入分析

栅格特点

  • 行（row）必须包含在container（固定宽度）或container-fluid中。
  • 行使用的样式是：.row，列使用的样式是：.col，元素应当放在列（column）内。
  • 基本的书写方式同表格form，先定义容器-行-列-元素

栅格的参数

  • col-屏幕尺寸-占用列数

例子

html <div class="container-fluid" style="border: 1px double red"> <div class="row"><!--第一个行，自动分割为12列--> <div class="col-lg-4" style="border: 1px solid red">111111</div> <div class="col-lg-4" style="border: 1px solid red">222222</div> <div class="col-lg-4" style="border: 1px solid red">333333</div> </div> </div>

a8cde6de4bcd23d5ed6480ea31585e87.png

下面我们来探究当列的和大于小于等于12时，会发生点什么？

  • 1、当元素占据的列小于12
<div class="row"><!--第一个行，自动分割为12列-->
            <div class="col-lg-4" style="border: 1px solid red">111111</div>
            <div class="col-lg-4" style="border: 1px solid red">222222</div>
            <div class="col-lg-1" style="border: 1px solid red">333333</div>
        </div>

84a6a5b0115dfa44a97da54f68ef9e2e.png
  • 2、当元素占据的列的总和等于12html <div class="row"><!--第一个行，自动分割为12列--> <div class="col-lg-4" style="border: 1px solid red">111111</div> <div class="col-lg-4" style="border: 1px solid red">222222</div> <div class="col-lg-1" style="border: 1px solid red">333333</div> </div>

901db76b81120c2b893563ae01644e59.png

所以我们可以看到如果列元素的占据列的总和小于等于12，仍然排在一行上。

  • 3、当元素占据的列的总和大于12html <div class="row"><!--第一个行，自动分割为12列--> <div class="col-lg-4" style="border: 1px solid red">111111</div> <div class="col-lg-4" style="border: 1px solid red">222222</div> <div class="col-lg-8" style="border: 1px solid red">333333</div> </div> 效果：大于12的列元素会单独占据新的一行。

180adcc12be90cf74beb500240629b11.png

### 5.4、BootStrap的栅格系统屏幕尺寸的设置及多个屏幕共同设置尺寸

栅格的参数

06d8ccd5ca4b9a18d6df83052db45e2b.png

屏幕尺寸的大小

  • large ，lg 大屏幕，大桌面显示器
  • medium ，md，中等屏幕，桌面显示器
  • small，sm，小屏幕，平板
  • x small xs，超小屏幕，手机
关于xs： col-xs-* have been dropped in Bootstrap 4 in favor of col-*。BootStrap4里面，使用xs的正确姿势：如col-4； 关于xl：超大屏幕 x large； 关于xxl：更加大的屏幕

当设置的屏幕尺寸大的时候，这个时候通过缩放，导致每个元素单独成一行：

html <div class="row"><!--第一个行，自动分割为12列--> <div class="col-lg-4" style="border: 1px solid red">111111</div> <div class="col-lg-4" style="border: 1px solid red">222222</div> <div class="col-lg-4" style="border: 1px solid red">333333</div> </div>

原来的尺寸：

2b62e722339572e7a2018cc756437d7e.png

现在缩放：

d330626f7cb53bc8f10949083042bf91.png

当设置的屏幕尺寸为sm的时候，这个时候，会有一个继承属性，使得当屏幕尺寸大于sm的时候，能够正常显示一行：

html <div class="row"><!--第一个行，自动分割为12列--> <div class="col-sm-4" style="border: 1px solid red">111111</div> <div class="col-sm-4" style="border: 1px solid red">222222</div> <div class="col-sm-4" style="border: 1px solid red">333333</div> </div>

d0b85bb94d1cbf3f3585f6bed6f7259a.png

放大：

3e40df01111902fae60efe3a7a62845a.png

放大到lg的：

c32016f3a41e9e455ddd9379128c534c.png

但是缩小到xm还是会变：

e796d6e4239131bf6cd3fb2b299f26b5.png

这种情况我们可以使用：（我这里使用了两个行来对比）

html <div class="row"><!--第一个行，自动分割为12列--> <div class="col-xs-4 col-sm-4 " style="border: 1px solid red">111111</div> <div class="col-xs-4 col-sm-4 " style="border: 1px solid red">222222</div> <div class="col-xs-4 col-sm-4 " style="border: 1px solid red">333333</div> </div> <div class="row"> <div class="col-xs-6 col-md-4" style="border: 1px solid red">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4" style="border: 1px solid red">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4" style="border: 1px solid red">.col-xs-6 .col-md-4</div> </div>

302d4a18aaeca8c3756a871f1ffcd517.png

可以看出，设置了ms的，缩放到ms可以显示一行。而下面的只设置了sm的无法显示一行。这就是向上可以继承。下则需要设置。

### 5.5、 栅格系统的列偏移

e3be0618f8e97201add1a0bcc6604d25.png

上面的设置偏移是通过设置一个空的div，这样不好。实际上是通过：

b0b4ee7b15f55822f649cd237606f23e.png 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=4,user-scalable=no">

    <title>列偏移</title>

    <!-- Bootstrap -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-1.12.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div class="row" style="border: 1px solid red">
    <div class="col-md-4" style="border: 1px solid red">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4" style="border: 1px solid red">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
    <div class="col-md-3 col-md-offset-3" style="border: 1px solid red">.col-md-3 .col-md-offset-3</div>
    <div class="col-md-3 col-md-offset-3" style="border: 1px solid red">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
    <div class="col-md-6 col-md-offset-3" style="border: 1px solid red">.col-md-6 .col-md-offset-3</div>
</div>
</body>
</html>

2c1ccecc38a1121ee6b0c17d5a58c62f.png
weixin_39932455
关注
Bootstrap概述
藜笙的博客
06-27 723
Bootstrap是世界最受欢迎的Wed框架之一 ，用于开发响应式布局、移动设备优先的Wed项目。在其中，你将发现高质量的HTML、CSS以及JavaScript，使您的WEB工程项目变得无比简单，包括官方的CDN和启动器服务。 Container容器 Container容器是窗口布局的最基本元素，我们推荐所有样式都定义在.container或.container-fluid容器之中--这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容...
Bootstrap_1.响应式网页、Bootstrap、全局CSS样式
2018.
12-11 1611
响应式网页、Bootstrap、全局CSS样式1 响应式网页1.1 概述1.2 测试响应式网页1.3 编写响应式网页2 Bootstrap2.1 Bootstrap2.1.1 Bootstrap定义2.1.2 目录说明2.1.2 模板2.1.3 相关技术2.3 bootstrap.css2.3.1 CSS Reset2.3.2 box-sizing3 全局CSS样式3.1 全局CSS样式3.2 栅...
BootStrap概述（一）
LH is programming hard
09-25 1169
文章目录BootStrap概述（一）1、什么是BootStrap2、BootStrap的好处是什么3、搭建BootStrap的开发环境4、BootStrap布局容器5、栅格系统5.1、BootStrap的栅格系统5.2、BootStrap的栅格系统入门案例5.3、BootStrap的栅格系统的特点及深入分析5.4、BootStrap的栅格系统屏幕尺寸的设置及多个屏幕共同设置尺寸5.5、 栅格系统的列偏移 BootStrap概述（一） 1、什么是BootStrap Bootstrap 是最受欢迎的 HTML、
bootstrap元素宽度_Bootstrap前端开发必备，一秒学会Bootstrap
weixin_39524048的博客
11-19 137
你想要了解Bootstrap栅格系统的都在这儿Bootstrap框架是如今最流行的前端框架之一，Bootstra功能强大，简单易学，很符合实际应用场景。但是其中包含的内容比较多，新手往往不能很快的熟练掌握。接下来，我们一起对Bootstra栅格系统做一下简单的总结：Bootstrap栅格系统：Bootstrap包含了一个响应式的、移动设备优先的、不固定网格系统，可以随着设备或视口大小的增加而适当地...
bootstrap的作用
weixin_44943389的博客
05-23 470
通过Bootstrap方法，我们可以获得对样本数据的更多信息，如总体分布的估计、统计量的标准误差、置信区间等。它的优点在于不需要对总体分布做出假设，能够对样本数据的特性进行较为准确的估计。需要注意的是，Bootstrap方法并不能解决样本本身的问题，如样本大小过小或样本的偏倚性等。统计量估计：基于B个自助样本的统计量，计算统计量的平均值、标准差、置信区间等，作为对总体统计量的估计。重复抽样：重复步骤2和步骤3，进行B次抽样和统计量计算，得到B个自助样本的统计量。
bootstrap模板bootstrap模板.txt
最新发布
06-07
#### 一、Bootstrap 概述 Bootstrap 是一款非常受欢迎的前端开发框架，由 Twitter 开发并开源。它旨在提供一套简洁、直观、强大的 Web 开发工具，帮助开发者快速构建响应式和移动优先的网站。Bootstrap 的核心特性...
bootStrap学习
01-25
**一、BootStrap概述** Bootstrap是由Twitter开发的开源框架，它的目标是提供一套简洁、直观、强大的工具，帮助开发者快速创建美观且功能齐全的网页设计。核心特性包括响应式布局、移动设备优先、易于使用的组件和...
Bootstrap知识点概述
Fallen__down的博客
11-16 471
HTML5文档类型 Bootstrap 使用的某些HTML元素与CSS属性都需要文档声明是HTML5文档类型。 移动设备优先 Bootstrap 是移动设备优先的，对移动设备的样式融入到了框架的方方面面。 为确保绘制和缩放效果，要在<head>标签中添加 viewport 元数据标签。 <meta name="viewport" content="width=de...
a按钮居中显示 bootstrap_Bootstrap 按钮
weixin_39767121的博客
12-19 357
Bootstrap 按钮目标按钮广泛应用于网站或应用程序中。在本教程中，我们将通过实例、实例解释来讨论如何使用 Boostrap 3 按钮，以及如何定制默认的按钮。使用默认的按钮下面的实例将演示如何通过 Bootstrap 3 快速创建按钮。实例Bootstrap 3 默认按钮body {padding: 50px}默认原始成功信息警告危险链接以上代码输出如下。您可以点击这里，在线查看实例。CSS...
菜鸟学习bootstrap常用功能
热门推荐
非专业程序员小田
10-24 1万+
bootstrap中文官网:http://v3.bootcss.com/components/
bootstrap元素宽度_BootStrap从基础到项目实战_第1季_03章_01_CSS样式之栅格布局
weixin_39961943的博客
11-16 101
目标目标一、理解什么是栅格布局目标二、掌握栅格布局具体应用目标三、掌握BootStrap通用CSS样式(排版、代码、代码、表单、按钮、图片、辅助类、响应式工具)内容一、BootStrap全局CSS之 - 栅格布局1.1、概述深入了解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。1.1.1 HTML5 文档类型Bootstrap 使用到的某些 H...
Bootstrap的一些主要作用
weixin_63681863的博客
09-07 1057
样式组件：Bootstrap提供了一系列的CSS样式和组件，包括按钮、表单、导航、徽章、面包屑、警告框等等，开发者可以直接使用这些组件，减少了开发时间和代码量。自定义主题：Bootstrap允许开发者根据项目需求进行定制，通过Sass变量和自定义样式表，可以轻松修改Bootstrap的外观和风格，以适应不同的设计需求。总之，Bootstrap大大简化了前端开发的工作，提供了大量可重用的组件和样式，使开发者能够快速构建现代化的用户界面，并且确保了响应式和移动友好的布局。
BootStrap框架
weixin_46321758的博客
09-26 172
2020-9-26今日内容 1. Bootstrap Bootstrap： 1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2. 响应式布局。
Bootstrap有什么好处？
qq_45800977的博客
04-16 742
为什么要用Bootstrap？ 快速开发：bootstrap 提供了大量的 css 样式和 javascript 插件，使得开发者能够快速地开发网站和应用程序。 响应式设计：在不同大小的设备上运行良好。bootstrap 的响应式设计使得网页适应各种屏幕尺寸，并且在移动设备上的可访问性很好。 浏览器兼容性：bootstrap 可以确保网站在主流浏览器中正常运行。 文档齐全：bootstrap 拥有完整的文档支持，并且有活跃的社区支持和开发。这使得开发者可以快速入门并轻松使用库的功能。 易于自定义：通过修改
BootStrap技术
weixin_30416497的博客
08-03 192
1.查看百度百科了解bookstrap技术 2.【上机】下载bookstrap最新使用文档及源码 3.【上机】用代码说明如何在网页中引入bootstarp 4.【上机】完成网页图片轮播功能 5.【上机】完成网页table课程表制作 6.【上机】使用bookstrap完成网页经典的左右布局 转载于:https://www.cnblogs.com/ren549047861/p/1...
bootstarp模态框按钮居中 （一左一右 垂直水平居中）
huang_ftpjh的博客
10-25 2965
因为按钮在底部栏<div class="modal-footer"> 要想让按钮一左一右显示 需要在按钮标签上加一个 div 这样就可以进行位置变动 获取模态框的宽度 自定义按钮位置 <div class="modal fade" id="Ascertainmsg" tabindex="-1" role="dialog" aria-label...
Bootstrap
DedoChen的博客
03-15 478
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。 Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 Bootstrap 基本结构 Bootstrap CSS Bootstrap 布局组件  Bootstrap 插件几个部分 1.What is Bootstrap？ Bootstrap 是一个用于快速开发 Web 应...
bootstrap_go_package
09-18
bootstrap_go_package是一个用于Go语言的开源框架，用于快速构建Web应用程序。它提供了一套丰富的功能和组件，以简化前端开发的工作。 首先，bootstrap_go_package提供了统一的界面设计和样式，使得开发人员可以快速构建具有一致外观和响应式布局的网页。通过使用bootstrap_go_package提供的CSS样式和JavaScript插件，开发人员可以轻松创建漂亮、易于使用和具有良好用户体验的界面。 其次，bootstrap_go_package还提供了一套丰富的组件，包括导航栏、标签页、按钮、表单、模态框等，这些组件可以让开发人员在不写太多代码的情况下实现常见的界面功能。通过使用bootstrap_go_package提供的组件，开发人员可以节省大量的开发时间，并且可以确保界面的一致性和可靠性。 此外，bootstrap_go_package还支持响应式布局，即可以根据用户设备的屏幕大小自动调整界面布局和样式，从而提供更好的用户体验。无论是在桌面、平板还是手机等设备上访问网页，用户都可以获得适合其设备的最佳浏览效果。 总之，bootstrap_go_package是一个功能强大、易于使用和扩展的开源框架，适用于Go语言的Web应用程序开发。它提供了丰富的功能和组件，可以帮助开发人员快速构建具有良好用户体验的Web界面。无论是初学者还是经验丰富的开发人员，都可以通过使用bootstrap_go_package来简化自己的开发工作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值