Bootstrap按钮样式

Bootstrap按钮样式

---

1.新建一个web项目ch07。

2.在ch07中新建一个demo01.html，将css文件模版导入进来。

3.将移动设备优先拷贝到demo01的头文件中。

<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no”>

4.导入css文件

5.定义一个button

<div class="container">

<button type="button" class="btn btn-danger">大家好</button>

     /*"btn btn-info"是样式，一个css组件设计思想是辅加这种模式，就是先定义这种样式然后再追加一个样式。*/

</div>

6.运行效果，鼠标移上是默认是有效果的。

当然，它定义了七种样式，比如说"btn btn-info"

<div class="container">

     <button type="button" class="btn btn-info">大家好</button>

</div>

运行效果：

7.定义按钮的七种样式，我们先给它增加一个样式叫btn，然后再加btn的样式，样式有默认样式、首选项、成功、一般信息、警告、危险、链接。

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

8.运行效果

注意：按钮大小取决于按钮里面文字的大小