bootstrap布局组件

1.字体图标:在导入jQuery和bootstrap的css和js后,通过添加特定的类名调用不同的字体图标。

2.下拉菜单:如需使用下拉菜单,只需要在 class .dropdown 内加上下拉菜单即可。

3.按钮组:该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。

4.输入框组:把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中

5.导航元素:以一个带有 class .nav 的无序列表开始。添加 class .nav-tabs

6.导航栏:向 <nav> 标签添加 class .navbar、.navbar-default

7.分页:.pagination添加该 class 来在页面显示分页

8.徽章:徽章(Badges)主要用于突出显示新的或未读的项。如需使用徽章,只需要把 <span class="badge"> 添加链接、Bootstrap 导航等这些元素上即可。

9.超大屏幕:创建一个带有 class .jumbotron. 的容器 <div>

10.页面标题:把标题放置在带有 class .page-header 的 <div> 中

11.缩略图:在图像周围添加带有 class .thumbnail 的 <a> 标签

12.进度条:添加一个带有 class .progress 的 <div>。接着,在上面的 <div> 内,添加一个带有 class .progress-bar 的空的 <div>。添加一个带有百分比表示的宽度的 style 属性,例如 style="width: 60%"; 表示进度条在 60% 的位置

13.列表组:向元素 <ul> 添加 class .list-group。向 <li> 添加 class .list-group-item

14.面板:面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可

15.well:Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可

相关文章

显卡天梯图2024最新版,显卡是电脑进行图形处理的重要设备,...
初始化电脑时出现问题怎么办,可以使用win系统的安装介质,连...
todesk远程开机怎么设置,两台电脑要在同一局域网内,然后需...
油猴谷歌插件怎么安装,可以通过谷歌应用商店进行安装,需要...
虚拟内存这个名词想必很多人都听说过,我们在使用电脑的时候...
win11本地账户怎么改名?win11很多操作都变了样,用户如果想要...