如何使用bootstrap 设置带 圆角加填充的边框？在bootstrap框架中，每个组件都有它分工，设置带 圆角加填充的边框是希望实现什么样功能呢？如果是要制作按钮，就用按钮组件；如果是仅需要标签功能，那就用标签组件；如果是警告功能，就用警告框组件……这里就以这三种组件的使用为例，想更多了解bootstrap框架的运用，可搜索‘bootstrap’并进入bootstrap中文官网，进行学习！
工具/原料
bootstrap
代码编辑器
标签组件
1、首先，引入bootstrap的css核心文件，最新版本的 Bootstrap 核心 CSS 文件 ： <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">，可以到bootstrap中文官网去查找版本。有了它我们就可以开始工作啦！
2、在bootstrap的框架中标签组件，并以‘.label’样式来实现高亮显示，既然它是一个独立的组件，不同的版本下有不同的文件： LESS版本：对应的源文件label.less Sass版本：对应的源文件_label.scss 编译后版本：bootstrap.css文件第4261行～第4327行使用原理：给span这样的行内标签添加样式‘.label’例子<h3>Example heading <span class="label label-default">New</span></h3>
3、标签组件样式设置，label样式也提供了多种颜色：label-deafult:默认标签，深灰色label-primary：主要标签，深蓝色label-success：成功标签，绿色label-info：信息标签，浅蓝色label-warning：警告标签，橙色label-danger：错误标签，红色主要是通过这几个类名来修改背景颜色和文本颜色：例子：<span class="label label-default">默认标签</span><span class="label label-primary">主要标签</span><span class="label label-success">成功标签</span><span class="label label-info">信息标签</span><span class="label label-warning">警告标签</span><span class="label label-danger">错误标签</span>
4、如果想自定义颜色的话，在bootstrap.css文件第4286行～第4237行间修改背景色为自定义的颜色，来达到你想要的效果
按钮组件
1、按钮组件与标签组件所不同的时，它有点击功能，通过类名“btn”来实现。源码请查阅bootstrap.css文件第1992行～第2010行。bootstrap框架的按钮使用非常简单，如下：<button class="btn" type="button">基础按钮</button>
2、Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格，然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。如：<button class="btn btn-default" type="button">默认按钮</button>
3、一般制作按钮除了使用<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 class="btn btn-default">span标签按钮</span> <div class="btn btn-default">div标签按钮</div><a href="#" class="btn btn-default">a标签按钮</a>效果如图：
4、在Bootstrap框架中除了默认的按钮风格之外，还有其他六种按钮风格，每种风格的其实都一样，不同之处就是按钮的背景颜色、边框颜色和文本颜色。不同的按钮风格都是通过不同的类名来实现，只需要选择不同的类名即可。例子：<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-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 btn-info" type="button">信息按钮</button>效果如图：
警告框组件
1、在网站中，当用户操作上下文时，需要为用户提供一些有效的警示框，比如说告诉用户操作成功、操作错误、提示或者警告等。在Bootstrap框架这个组件就是警示框组件。LESS版本：对应的源码文件alerts.lessSass版本：对应的源码文件_alerts.scss编译后的版本：bootstrap.css文件第4427行～第4499行
2、Bootstrap框架通过“alert“样式来实现警示框效果，并且提供了提供了四种警示框效果，如下： 成功警示框：告诉用用挥年抵遂户操作成功，在“alert”样式基础上追加“alert-success”样式，具体呈现的是背景、边框和文本都是绿色；信息警示框：给用户提供提示信息，在“alert”样式基础上追加“alert-info”样式，具体呈现的是背景、边框和文本都是浅蓝色； 警告警示框：提示用户小心操作（提供警告信息），在“alert”样式基础上追加“alert-warning”样式，具体呈现的是背景、边框、文本都是浅黄色； 错误警示框：提示用户操作错误，在“alert”样式基础上追加“alert-danger”样式，具体呈现的是背景、边框和文本都是浅红色。例子：div class="alert alert-success" role="alert">恭喜您操作成功！</div><div class="alert alert-info" role="alert">请输入正确的密码</div><div class="alert alert-warning" role="alert">您已操作失败两次，还有最后一次机会</div><div class="alert alert-danger" role="alert">对不起，您输入的密码有误</div>效果如图：
3、浏览网页的时，你会发现一些警示框带有关闭按钮，一点击关闭按钮就能自动关闭显示的警示框，Bootstrap框架中的警示框也具有这样的功能哦！原理：只需要在默认的警示框里面添加一个关闭按钮，然后需要在基本警示框“alert”的基础上添加“alert-dismissable”样式；在button标签中加入class="close"类，实现警示框关闭按钮的样式；最后要确保关闭按钮元素上设置了自定义属性：“data-dismiss="alert"。例子：<div class="alert alert-success alert-dismissable" role="alert"><button class="close" type="button" data-dismiss="alert">×</button>恭喜您操作成功！</div><div class="alert alert-info alert-dismissable" role="alert"> <button class="close" type="button" data-dismiss="alert">×</button> 请输入正确的密码</div><div class="alert alert-warning alert-dismissable" role="alert"> <button class="close" type="button" data-dismiss="alert">×</button> 您已操作失败两次，三次失败后，将会锁定账号</div>
