如何使用bootstrap 设置带 圆角加填充的边框

如何使用bootstrap 设置带 圆角加填充的边框？在bootstrap框架中，每个组件都有它分工，设置带 圆角加填充的边框是希望实现什么样功能呢？

如果是要制作按钮，就用按钮组件；如果是仅需要标签功能，那就用标签组件；如果是警告功能，就用警告框组件……这里就以这三种组件的使用为例，想更多了解bootstrap框架的运用，可搜索‘bootstrap’并进入bootstrap中文官网，进行学习！

首先，引入bootstrap的css核心文件，最新版本的 Bootstrap 核心 CSS 文件 ： ，可以到bootstrap中文官网去查找版本。有了它我们就可以开始工作啦！

在bootstrap的框架中标签组件，并以‘.label’样式来实现高亮显示，既然它是一个独立的组件，不同的版本下有不同的文件：

LESS版本：对应的源文件label.less

Sass版本：对应的源文件_label.scss

编译后版本：bootstrap.css文件第4261行～第4327行

使用原理：给span这样的行内标签添加样式‘.label’

例子

Example heading New

标签组件样式设置，label样式也提供了多种颜色：

label-deafult:默认标签，深灰色

label-primary：主要标签，深蓝色

label-success：成功标签，绿色

label-info：信息标签，浅蓝色

label-warning：警告标签，橙色

label-danger：错误标签，红色

主要是通过这几个类名来修改背景颜色和文本颜色：

例子：

默认标签

主要标签

成功标签

信息标签

警告标签

错误标签

如果想自定义颜色的话，在bootstrap.css文件第4286行～第4237行间修改背景色为自定义的颜色，来达到你想要的效果

按钮组件与标签组件所不同的时，它有点击功能，通过类名“btn”来实现。源码请查阅bootstrap.css文件第1992行～第2010行。

bootstrap框架的按钮使用非常简单，如下：

基础按钮

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

如：

默认按钮

一般制作按钮除了使用标签元素之外，还可以使用和标签等。在Bootstrap框架中制作按钮时，，要在制作按钮的标签元素上添加类名“btn”如果不添加是不会有任何按钮效果。

例子：

button标签按钮

span标签按钮

a标签按钮

效果如图：

在Bootstrap框架中除了默认的按钮风格之外，还有其他六种按钮风格，每种风格的其实都一样，不同之处就是按钮的背景颜色、边框颜色和文本颜色。

不同的按钮风格都是通过不同的类名来实现，只需要选择不同的类名即可。

例子：

基础按钮.btn

默认按钮.btn-default

主要按钮.btn-primary

成功按钮.btn-success

警告按钮.btn-warning

危险按钮.btn-danger

链接按钮.btn-link

信息按钮

效果如图：

在网站中，当用户操作上下文时，需要为用户提供一些有效的警示框，比如说告诉用户操作成功、操作错误、提示或者警告等。在Bootstrap框架这个组件就是警示框组件。

LESS版本：对应的源码文件alerts.less

Sass版本：对应的源码文件_alerts.scss

编译后的版本：bootstrap.css文件第4427行～第4499行

Bootstrap框架通过“alert“样式来实现警示框效果，并且提供了提供了四种警示框效果，如下：

成功警示框：告诉用用户操作成功，在“alert”样式基础上追加“alert-success”样式，具体呈现的是背景、边框和文本都是绿色；

信息警示框：给用户提供提示信息，在“alert”样式基础上追加“alert-info”样式，具体呈现的是背景、边框和文本都是浅蓝色；

警告警示框：提示用户小心操作（提供警告信息），在“alert”样式基础上追加“alert-warning”样式，具体呈现的是背景、边框、文本都是浅黄色；

错误警示框：提示用户操作错误，在“alert”样式基础上追加“alert-danger”样式，具体呈现的是背景、边框和文本都是浅红色。

例子：

div class="alert alert-success" role="alert">恭喜您操作成功！