Bookstrap 基础（一）

hot water.

已于 2022-01-25 12:09:50 修改

阅读量425

点赞数 1

文章标签： css css3 html

于 2022-01-25 12:09:24 首次发布

本文链接：https://blog.youkuaiyun.com/whowho_s/article/details/122682755

版权

1、Flex 弹性盒布局

CSS 弹性盒是一种布局方式，常用于当页面需要适应不同的屏幕大小以及设备类型时能够确保元素拥有恰当的行为。

作用：

能够更加高效方便地控制元素的对齐、排列。
无论元素的尺寸是固定的还是动态的，都可以自动计算布局内元素的尺寸。
控制元素在页面中的布局方向。
按照不同于DOM所指定的排序方式对屏幕上的元素重新排序。

语法：display : flex;

使用Flex弹性布局有如下好处：

可以让子元素排列在一行。
使子元素的高度一致。

Flex弹性盒布局可以分为容器属性和项目属性。

**容器属性：**一个有六个

容器属性	说明
flex-direction	决定主轴的方向（即项目的排列方向）
flex-wrap	定义项目在一条轴线排不下时如何换行
justify-content	定义项目在主轴上的对齐方式
flex-flow	复合属性：是flex-direction和flex-wrap属性的简写形式
align-items	定义项目在纵轴上的对齐方式
align-content	定义多根轴线的对齐方式

1、flex-direction

.container {
    flex-direction: row（这个是默认值） | row-reverse | column | column-reverse
}

flex-direction用来设置主轴的方向，共有4个值：

row 主轴是水平方向，起点在左（可以理解为x轴，这个是默认值）。
row-reverse 主轴是水平方向，起点在右（可以理解为x轴）。
column 主轴是垂直方向，起点在上（可以理解为y轴）。
column-reverse 主轴是垂直方向，起点在下（可以理解为y轴）。

2、flex-wrap

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

其属性值有三个：

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

3、flex-flow

其中flex-flow是flex-direction和flex-wrap属性的简写方式。

.container{
  flex-flow: flex-direction || flex-wrap;
}

注意：为保证代码的易读性，在编写代码时，推荐使用拆分形式书写。

4、justify-content

设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around

flex-start：弹性盒子元素将向行起始位置对齐。
flex-end：弹性盒子元素将向行结束位置对齐。
center：弹性盒子元素将向行中间位置对齐。
space-between：弹性盒子元素会平均地分布在行里。
space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。

5、align-items

设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

align-items: flex-start | flex-end | center | baseline | stretch

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴（纵轴）起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）结束位置的边界紧靠住该行的侧轴（纵轴）结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

6、align-content

设置或检索弹性盒堆叠伸缩行的对齐方式。

align-content: flex-start | flex-end | center | space-between | space-around | stretch

flex-start：各行向弹性盒容器的起始位置堆叠。
flex-end：各行向弹性盒容器的结束位置堆叠。
center：各行向弹性盒容器的中间位置堆叠。
space-between：各行在弹性盒容器中平均分布。
space-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
stretch：各行将会伸展以占用剩余的空间。

技巧：

利用align-content和align-items两个属性可以比较简单的解决传统布局中垂直居中对齐的难题。

项目属性：一共有六个

项目属性	说明
order	设置项目的排列顺序
flex-grow	设置项目的放大比例
flex-shrink	设置项目的缩小比例
flex-basis	设置弹性盒伸缩基准值
flex	复合属性，代表flex-grow、flex-shrink、flex-basis的简写，用于设置弹性盒模型对象的子元素如何分配空间
align-self	设置子元素在侧轴（纵轴）方向上的对齐方式

1、order (适用于弹性盒模型容器子元素)

设置或检索弹性盒模型对象的子元素出現的順序。

order: <integer>

：用整数值来定义排列顺序，数值小的排在前面。可以为负值。

2、flex-grow (适用于弹性盒模型容器子元素)

设置或检索弹性盒的扩展比率。根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。

flex-grow: <number> (default 0)

：用数值来定义扩展比率。不允许负值
flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。

3、flex-shrink (适用于弹性盒模型容器子元素)

设置或检索弹性盒的收缩比率（根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。）

flex-shrink: <number> (default 1)

flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

4、flex-basis(适用于弹性盒模型容器子元素)

设置或检索弹性盒伸缩基准值。

flex-basis: <length> | auto (default auto)

auto：无特定宽度值，取决于其它属性值
：用长度值来定义宽度。不允许负值
：用百分比来定义宽度。不允许负值

5、flex (适用于弹性盒模型子元素)

复合属性。设置或检索伸缩盒对象的子元素如何分配空间。

flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

none：none关键字的计算值为: 0 0 auto
[ flex-grow ]：定义弹性盒子元素的扩展比率。
[ flex-shrink ]：定义弹性盒子元素的收缩比率。
[ flex-basis ]：定义弹性盒子元素的默认基准值。

6、align-self (适用于弹性盒模型子元素)

设置或检索弹性盒子元素自身在侧轴（纵轴）方向上的对齐方式。

align-self: auto | flex-start | flex-end | center | baseline | stretch

auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

注意点：将容器转为flex布局后，项目不受float的影响

2、响应式布局

响应式布局可以用一套页面来适配不同的终端，但也有不足之处。

优点：

面对不同分辨率设备灵活性强，能够快捷地解决多设备显示适应问题。
更少维护，开发一个网站，多终端使用。

缺点：

兼容各种设备，工作量大，效率低下。
代码累赘，会出现隐藏无用的元素，加载时间较长。

媒体查询

可以针对不同的屏幕尺寸设置不同的样式，使页面在不同终端设备下达到不同的渲染效果。

有两种常用的引入方式：@media方式和link方式

@media方式

@media media Type and | not | only (media feature) { css-code; }

link方式

<link rel="stylesheet" media="media Type and|not|only (media Query)" href="mystylesheet.css">

其中media Type表示媒体类型，and|not|only是关键字，media Query表示媒体特性。

媒体类型

常用的媒体类型是all（全部）、screen（屏幕）及print（页面打印或打印预览模式）。

值	描述
all	用于所有设备
aural	已废弃
braille	已废弃
embossed	已废弃
handheld	用于打印机和打印预览
projection	已废弃
screen	用于计算机屏幕、平板电脑、智能手机等
speech	应用于屏幕阅读器等发声设备
tty	已废弃
tv	已废弃

媒体特性

值	描述
width	定义输出设置中的页面可见区域宽度
height	定义输出设置中的页面可面
min-width	定义输出设备中的页面最小可见区域宽度
min-height	定义输出设备中的页面最小可见区域高度
max-width	定义输出设备中的页面最大可见区域宽度
max-height	定义输出设备中的页面最大可见区域高度
device-width	定义输出设备的屏幕可见宽度
device-height	定义输出设备的屏幕可见高度
orientation	有两个属性值，当取值为portrait时，表示设备中的页面可见区域高度大于或等于；
resolution	定义设备的分辨率
color	定义输出设备每一组彩色原件的个数
color-index	定义在输出设备的彩色查询表中的条目数

关键词

当媒体特性出现多条并存时，需要通过关键词连接

and 关键词，表示同时满足两个条件时生效，到达限定范围
- @media screen and (max-width: 1200px) {样式代码……}
only 关键词，指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器
- @media only screen and (max-width: 1200px) {样式代码……}
not 关键词，用于排除某种指定的媒体类型，即排除符合表达式的设备
- @media not print and (max-width: 1200px) {样式代码……}

3、Bookstrap

Bootstrap : 提供了一个带有网格系统、链接样式、背景的基本结构

Bootstrap框架的优点主要体现在如下几点

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

3.1 Bootstrap 12栅格系统

栅格系统是通过一系列的行与列的组合来创建页面布局，设置的内容可以放入这些创建好的布局中。

3.1.1 Bootstrap 12栅格系统的使用

栅格系统的使用共有四种方式，分别为列组合、列偏移、列嵌套和列排序。

列组合

通过更改数字来合并列就是组合。

列偏移

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

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

列嵌套

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .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>

3.1.2 响应式栅格

使用 Bootstrap 框架可以制作响应式网页，因为它可以为不同屏幕尺寸提供不同的栅格样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ybtsr4aC-1643083744567)(C:\Users\32912\AppData\Roaming\Typora\typora-user-images\image-20211023180749231.png)]

3.2 CSS全局样式

Bootstrap 将设置全局的 CSS 样式。HTML 的基本元素均可以通过 class 设置样式并得到增强效果。还有先进的栅格系统。

3.2.1 排版

1、标题

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

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

2、页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

中心内容 — 通过添加 .lead 类可以让段落突出显示。

3、对齐方式

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

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

4、列表

无序列表、有序列表、自定义列表

内联列表 – 通过设置 .list-inline 并添加少量的内补（padding），将所有元素放置于同一行

<ul class="list-inline">
  <li>...</li>
</ul>

水平定义列表 – .dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

3.2.2 表单

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

1、内联表单

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

2、水平排列的表单

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

3、效验状态

Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

4、控件尺寸

通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

3.2.3 按钮

为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。

1、预定义样式

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

2、按钮尺寸

使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

<p>
  <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

3.2.4 图片

通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。

<img src="..." class="img-responsive" alt="Responsive image">

图片形状

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

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

3.3 组件

3.3.1 字体图标组件

Bootstrap 框架提供了250多个来自Glyphicon Halflings的字体图标，其作用在内联元素上

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

字体图标是以 glyphicon-开头的，原因是这些字体图标是由 https://glyphicons.com/ 网站提供的，所以使用时必须使用两个样式，即.glyphicon 和 .glyphicon- 开头的样式。

注意

图标类不能和其他组件直接联合使用。它们不能在同一个元素上与其他类共同存在，应该创建一个嵌套的标签，并将图标类应用到这个标签上。
图标类只能应用在不包含任何文本的内容或子元素上。

3.3.2 下拉菜单组件

用于显示链接列表的可切换、有上下文的菜单。