Bootstrap系列 -- 22. 按钮详解

时间:2019-06-29 05:24来源:计算机教程
  vnsc5858威尼斯城官网,      Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的

 

vnsc5858威尼斯城官网, 

 

 

  Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色边框颜色文本颜色。

  Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色边框颜色文本颜色。

<button type="button" class="btn btn-default">基本样式</button>
<button type="button" class="btn btn-default">基本样式</button>

 

 

  几种不同样式风格的按钮

  几种不同样式风格的按钮

  <button class="btn" type="button">基础按钮.btn</button>       <button class="btn btn-default" type="button">默认按钮.btn-default</button>      <button class="btn btn-primary" type="button">主要按钮.btn-primary</button>      <button class="btn btn-success" type="button">成功按钮.btn-success</button>      <button class="btn btn-info" type="button">信息按钮.btn-info</button>      <button class="btn btn-warning" type="button">警告按钮.btn-warning</button>      <button class="btn btn-danger" type="button">危险按钮.btn-danger</button>      <button class="btn btn-link" type="button">链接按钮.btn-link</button> 
  <button class="btn" type="button">基础按钮.btn</button>       <button class="btn btn-default" type="button">默认按钮.btn-default</button>      <button class="btn btn-primary" type="button">主要按钮.btn-primary</button>      <button class="btn btn-success" type="button">成功按钮.btn-success</button>      <button class="btn btn-info" type="button">信息按钮.btn-info</button>      <button class="btn btn-warning" type="button">警告按钮.btn-warning</button>      <button class="btn btn-danger" type="button">危险按钮.btn-danger</button>      <button class="btn btn-link" type="button">链接按钮.btn-link</button> 

 

 

  一般制作按钮除了使用<button>标签元素之外,还可以使用<input type="submit">和<a>标签等。同样,在Bootstrap框架中制作按钮时,除了刚才所说的这些标签元素之外,还可以使用在其他的标签元素上,唯一需要注意的是,要在制作按钮的标签元素上添加类名“btn”。如果不添加是不会有任何按钮效果

  一般制作按钮除了使用<button>标签元素之外,还可以使用<input type="submit">和<a>标签等。同样,在Bootstrap框架中制作按钮时,除了刚才所说的这些标签元素之外,还可以使用在其他的标签元素上,唯一需要注意的是,要在制作按钮的标签元素上添加类名“btn”。如果不添加是不会有任何按钮效果

<button class="btn btn-default" type="button">button标签按钮</button>   <input type="submit" class="btn btn-default" value="input标签按钮"/>  span标签按钮    <div class="btn btn-default">div标签按钮</div>    <a href="" class="btn btn-default">标签</a>
<button class="btn btn-default" type="button">button标签按钮</button>   <input type="submit" class="btn btn-default" value="input标签按钮"/>  span标签按钮    <div class="btn btn-default">div标签按钮</div>    <a href="" class="btn btn-default">标签</a>

 

 

  在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现,下面是不同风格样式的说明

  在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现,下面是不同风格样式的说明

vnsc5858威尼斯城官网 1

vnsc5858威尼斯城官网 2

vnsc5858威尼斯城官网 3

vnsc5858威尼斯城官网 4


 

  Bootstrap框架中,对于按钮的大小,也是可以定制的。类似于input一样,通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小

 vnsc5858威尼斯城官网 5

 

编辑:计算机教程 本文来源:Bootstrap系列 -- 22. 按钮详解

关键词: