Bootstrap基础组件实战:字体图标、输入框组到分页
Bootstrap 是一个流行的前端开发框架,它提供了一套预设的样式、组件和布局,使得创建响应式、移动优先的Web应用变得更加容易。本文将介绍如何在项目中简单地利用Bootstrap实现一些关键元素,包括字体图标、输入框组、导航栏、下拉菜单、徽章、警告框、面板以及分页功能。 1. 字体图标: Bootstrap中的`<span class="glyphicon glyphicon-ok-sign"></span>`用于显示预定义的图标,如上面的“OK”标志。通过引入Bootstrap CSS和Font Awesome图标库,你可以轻松在页面上添加可定制的图标,提升界面的可读性和视觉效果。 2. 输入框组(Input Groups): `<div class="input-group form-group">`是用于组合不同类型的输入控件,如文本框、按钮等。比如,你可以在这里添加输入框和辅助按钮,以创建一个简单的表单元素集合。 3. 导航条(Navbar): Bootstrap的导航栏组件由`<div class="navbar">`定义,可以用来构建网站的头部或顶部导航。`<nav class="navbar navbar-default">`设置了默认样式。`<div class="navbar-header">`包含导航栏的标题和展开/折叠按钮(`<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#xxx">...</button>`)。`collapse`类用于管理导航条在小屏幕设备上的折叠状态。 4. 下拉菜单(Dropdown): `<ul class="dropdown-menu">`是下拉菜单的核心部分,配合`<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">...</button>`使用,用户点击按钮时会显示下拉菜单。`<li>`元素用于定义菜单项,`<span class="badge">5</span>`用于显示带有计数的徽章。 5. 警告框(Alerts): `<div class="alert alert-success alert-dismissible">`用于显示通知或警告消息,如成功提示或错误信息。`<button type="button" class="close" data-dismiss="alert">...</button>`允许用户关闭警告框。 6. 面板(Panels): Bootstrap的面板用于组织内容,提供清晰的区分和层次感。`<div class="panel panel-success">`创建了一个带有成功的样式(primary),面板包括`<div class="panel-heading">`、`<div class="panel-body">`和`<div class="panel-footer">`部分,分别表示标题、主体内容和底部区域。 7. 分页(Pagination): `<ul class="pagination">`用于创建分页链接,`<li class="active">`标记当前页,`<li disabled>`表示不可选的页码。用户可以通过这些链接浏览多页内容。 Bootstrap提供了一套强大的工具集,简化了前端开发者的工作,使得创建美观且功能丰富的Web界面变得轻而易举。通过熟练掌握这些基础组件,你可以在各种项目中快速构建响应式的用户体验。
<span class="glyphicon glyphicon-ok-sign"></span>
输入框组
1.div input-group form-group
2.span input-group-addon
3.把显示文字放在span内
4.div 加 form-control 类
导航条
1.nav div 加navbar nav-default
2.div navbar-header 小屏幕显示
2.1 开关<a></a> <button></button>
2.2 点击可以显示小屏幕 大屏幕隐藏
2.3 给开关加 navbar-toggle类 data-toggle="collapse" data-target="#xxx"
3.创建隐藏容器 加collapse navbar-加collapse 给一个id xxx
4.创建 ul 加 类 nav navbar-nav
下拉菜单
1. div 加dropdown / dropup
2. 创建按钮 data-toggle="dropdown" dropdown-toggle类
3.创建ul 加 dropdown-menu类
徽章
<span class="badge">5</span>
警告框
1. div alert alert-success alert-dismissible
2.给一个按钮 按钮要有data-dismiss="alert" close 类
面板
1.创建div 加panel panel-success primary
2.如果是头部 pannel-heading
下载后可阅读完整内容,剩余1页未读,立即下载
- 粉丝: 0
- 资源: 1
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 李兴华Java基础教程:从入门到精通
- U盘与硬盘启动安装教程:从菜鸟到专家
- C++面试宝典:动态内存管理与继承解析
- C++ STL源码深度解析:专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手:数据管理与企业增值的战略
- Eclipse IDE基础教程:从入门到精通
- Shell脚本专家宝典:全面学习与资源指南
- Tomcat安装指南:附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华:必备术语集锦