Bootstrap样式

困困的小熊

已于 2023-08-02 16:40:23 修改

阅读量98

点赞数 2

文章标签： bootstrap 前端 html

于 2023-07-31 09:26:28 首次发布

本文链接：https://blog.csdn.net/m0_65491952/article/details/131975503

版权

Bootstrap是一个流行的前端开发框架，由Twitter的设计师创建，它提供简洁、直观的工具，支持快速开发和移动设备优先的设计。框架包括CSS和JS组件，如栅格系统、按钮、图片样式等，适用于创建响应式网页。

摘要由CSDN通过智能技术生成

什么是Bootstrap

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作,基于HTML,CSS,JavaScript开发的简洁,直观,强悍的前端开发框架,它会使开发更加快捷

Bootstrap框架的优点

开发方便快捷
兼容处理
移动设备优先
使用广泛

Bootstrap的下载

https://v3.bootcss.com
单击"下载Bootstrap"按钮
下载解压后可以的文件夹和文件

将已经下载的Bootstrap框架文件引入在实际的项目中，搭建出Bootstrap框架最基本的HTML模板

<meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title>Bootstrap 基本模板</title>
<!-- Bootstrap的CSS文件 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>这是一个Bootstrap框架的最基本HTML模板</h1>
<!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
<script src="js/jquery-1.12.4.js"></script>
<!-- Bootstrap的JS插件-->
<script src="js/bootstrap.min.js"></script>
</body>

12栅格系统

12栅格的使用

列组合

使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-3</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

列偏移

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

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

您还可以使用.col-*-ofset-0类覆盖较低网格层的偏移。

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

列嵌套

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

响应式栅格

	栅格系统行为	列数	类前缀
超小屏幕手机(<768px)	总是水平排列	12	.col-xs-
小屏幕平板(≥768px)	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C	12	.col-sm-
中等屏幕桌面显示器(≥922px)	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C	12	.col-md-
大屏幕大桌面显示器(≥1200px)	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C	12	.col-lg-

css全局样式

排版

标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。

    <h1 class="small">h1. Bootstrap heading <small class="h1">Secondary text</small></h1>
    <h2 class="small">h2. Bootstrap heading <small class="h2">Secondary text</small></h2>
    <h3 class="small">h3. Bootstrap heading <small class="h3">Secondary text</small></h3>
    <h4 class="small">h4. Bootstrap heading <small class="h4">Secondary text</small></h4>
    <h5 class="small">h5. Bootstrap heading <small class="h5">Secondary text</small></h5>
    <h6 class="small">h6. Bootstrap heading <small class="h6">Secondary text</small></h6>

页面主体

内联文本元素

为了突出显示与另一个上下文中相关的文本，可以使用<mark>标记。

You can use the mark tag to <mark>highlight</mark> text.

对于被删除的文本使用 <del> 标签。

<del>This line of text is meant to be treated as deleted text.</del>

为文本添加下划线，使用 <u> 标签。

<u>This line of text will render as underlined</u>

通过增加 font-weight 值强调一段文本

<strong>rendered as bold text</strong>

用斜体强调一段文本。

<em>rendered as italicized text</em>

对齐

通过文本对齐类，可以简单方便的将文字重新对齐。

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

改变大小写

通过这几个类可以改变文本的大小写

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

按钮

禁用状态

disabled 属性，使其表现出禁用状态。

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

图片

图片形状

通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。

<img src="..." alt="..." class="img-rounded">//方形
<img src="..." alt="..." class="img-circle">//圆形
<img src="..." alt="..." class="img-thumbnail">//方形带边框