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

如何使用bootstrap 设置带 圆角加填充的边框？在bootstrap框架中，每个组件都有它分工，设置带 圆角加填充的边框是希望实现什么样功能呢？如果是要制作按钮，就用按钮组件；如果是仅需要标签功能，那就用标签组件；如果是警告功能，就用警告框组件……这里就以这三种组件的使用为例，想更多了解bootstrap框架的运用，可搜索‘bootstrap’并进入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>

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

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

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>效果如图：

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>效果如图：