Bootstrap 3 API
简介
Bootstrap 是一个前端框架,用于开发响应式和移动设备优先的网站,Bootstrap 3 是该框架的第三个主要版本,引入了更多新特性和改进,本文将详细介绍 Bootstrap 3 的主要组件、类和功能。
布局系统
栅格系统
Bootstrap 3 使用 12 列的流动栅格系统,允许开发者创建响应式布局,以下是一些常用的栅格类:
类名 | 描述 |
.col-xs |
超小屏幕(小于 768px) |
.col-sm |
小屏幕(大于等于 768px) |
.col-md |
中等屏幕(大于等于 992px) |
.col-lg |
大屏幕(大于等于 1200px) |
创建一个在大屏幕上占据 6 列,在中等屏幕上占据 4 列,在小屏幕上占据 3 列的列:
<div class="col-xs-3 col-sm-4 col-md-6 col-lg-6">...</div>
偏移类
偏移类用于在栅格系统中向右移动列,以下是一些常用的偏移类:
类名 | 描述 |
.col-xs-offset |
超小屏幕偏移 |
.col-sm-offset |
小屏幕偏移 |
.col-md-offset |
中等屏幕偏移 |
.col-lg-offset |
大屏幕偏移 |
创建一个在大屏幕上向右偏移 3 列的列:
<div class="col-xs-3 col-sm-4 col-md-6 col-lg-6 col-lg-offset-3">...</div>
常用组件
按钮
Bootstrap 提供了多种样式的按钮,包括默认、提供、成功、警告、危险和链接按钮,以下是一些常用的按钮类:
类名 | 描述 |
.btn |
默认按钮 |
.btn-default |
默认风格按钮 |
.btn-primary |
主色按钮 |
.btn-success |
成功按钮 |
.btn-info |
信息按钮 |
.btn-warning |
警告按钮 |
.btn-danger |
危险按钮 |
.btn-link |
链接按钮 |
创建一个主色按钮:
<button type="button" class="btn btn-primary">主色按钮</button>
表单控件
Bootstrap 提供了多种样式的表单控件,包括输入框、复选框、单选按钮和下拉菜单,以下是一些常用的表单控件类:
类名 | 描述 |
.form-control |
输入框、选择框等控件 |
.checkbox |
复选框 |
.radio |
单选按钮 |
创建一个带有占位符文本的输入框:
<input type="text" class="form-control" placeholder="输入文本">
表格
Bootstrap 提供了基本的表格样式,并支持条纹、边框和悬停效果,以下是一些常用的表格类:
类名 | 描述 |
.table |
基本表格 |
.table-striped |
条纹表格 |
.table-bordered |
带边框的表格 |
.table-hover |
悬停效果的表格 |
创建一个带有条纹和边框的表格:
<table class="table table-striped table-bordered">...</table>
导航栏
Bootstrap 提供了多种样式的导航栏,包括固定顶部、固定底部和响应式导航栏,以下是一些常用的导航栏类:
类名 | 描述 |
.navbar |
基本导航栏 |
.navbar-default |
默认风格导航栏 |
.navbar-inverse |
反转颜色导航栏 |
.navbar-fixed-top |
固定顶部导航栏 |
.navbar-fixed-bottom |
固定底部导航栏 |
创建一个固定顶部的导航栏:
<nav class="navbar navbar-default navbar-fixed-top">...</nav>
相关问题与解答
问题 1:如何在 Bootstrap 3 中创建一个响应式图片?
解答:在 Bootstrap 3 中,可以使用.img-responsive
类来创建一个响应式图片,这个类会为图片添加max-width: 100%; height: auto;
样式,使图片在不同尺寸的设备上都能自适应。
<img src="path/to/image.jpg" class="img-responsive">
问题 2:如何在 Bootstrap 3 中创建一个带有图标的按钮?
解答:在 Bootstrap 3 中,可以使用 Glyphicons 字体图标库来创建带有图标的按钮,在 HTML 中引入 Glyphicons 的 CSS 文件,然后在按钮中使用.glyphicon
类和相应的图标类。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
以上就是关于“bootstrap 3 api”的问题,朋友们可以点击主页了解更多内容,希望可以够帮助大家!
原创文章,作者:K-seo,如若转载,请注明出处:https://www.kdun.cn/ask/713789.html