Bootstrap
文章平均质量分 86
苦海123
专研前端,探索后端,热爱技术,不断汲取
展开
-
bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象
轮播图:bootstrap封装了轮播图的功能,其具体如下:类名描述.carousel创建一个轮播图块的容器,实质是做布局用;且此容器应该有一个di属性,其属性值提供给下面左右按钮href锚点值,用于左右按钮控制图片切换.data-ride=“carousel”页面刷新实现轮播图自动滑动等功能,其他点击功能正常.carousel-inner定义装所有图片的大容器,实质是对此容器进行定位布局等.carousel-item定义装每张图片的小容器,对每张小图片进行布原创 2021-05-17 21:13:43 · 571 阅读 · 2 评论 -
bootstrap中导航、导航栏、表单及自定义表单
导航:bootstrap中使用列表封装了水平导航,其类样式如:类名描述.nav给ul或ol,用于清除列表默认样式,并将列表项水平排列.nav-item给li,用于布局.nav-link给li里面的a,用于a布局.justify-content-center用于居中ul或ol(使位于屏幕中间).justify-content-end用于靠右ul或ol(使位于屏幕右侧).flex-column给ul 或 ol,使垂直排列.nav-tabs原创 2021-05-16 23:44:53 · 1230 阅读 · 11 评论 -
bootstrap中分页、面包屑导航、列表组、卡片、下拉菜单、折叠
分页:分页功能是当遇到数据很多时,如果都放到一个页面上,那么找起来很不方便,而且不利于性能。此时采用分页功能就能很好的优化用户体验,可是如果自己开发分页功能,那么就会影响开发效率,bootstrap提供了分页功能,可以很好的解决这个问题,其用法:给父级ul标签添加pagination类,给子级li添加page-item,类样式如下:类名描述.pagination分页功能的容器添加的类名,用于布局.page-item给分页功能里面每一项添加的类名,用于选择伪类 ,布局链接样式原创 2021-05-16 15:16:07 · 963 阅读 · 0 评论 -
bootstrap中单个按钮、按钮组、徽章、进度条
单按钮:背景按钮:bootstrap提供了具有特殊意义背景的按钮样式,使用时只需给自己的按钮(button、input、a)加bootstrap提供的类名即可,其具体如下:类名描述.btn基本按钮:灰色、有高度、宽度自适应、没有原始边框,表示基本;使用此类名后一组垂直按钮的宽度将各自相互保持相等.btn-primary主要按钮:蓝色、高度由行高决定、宽度自适应,表示主要.btn-secondary次要按钮:深灰色、高度由行高决定、宽度自适应,表示次要.btn-原创 2021-05-15 23:01:13 · 977 阅读 · 0 评论 -
bootstrap中表格、修饰图片、浮动、背景框、提示框及关闭提示框、元素淡入淡出及jQuery中操作类名
表格:bootstrap中用类定义了几个风格的表格,使用时给table标签加上类名即可,具体如下:类名描述.table基础表格:标题加粗,只有水平的淡灰色边框线条,没有垂直方向的线条.table-striped条纹表格:标题加粗,隔行交替灰白两色,没有边框线.table-bordered边框表格:具有水平方向和垂直方向的淡灰色边框线,标题加粗.table-hover鼠标悬停表格:加载完是一个基础没有边框的表格,当鼠标经过某行时背景颜色变淡灰色. tab原创 2021-05-15 13:45:50 · 890 阅读 · 2 评论 -
bootstrap中语义化标签、字体风格、文本布局、列表排列、特殊字体颜色及特殊背景颜色
语义化标签:bootstrap中提供一些语义化标签,它们自带样式,这里介绍几个样式比较明显的语义化标签:<!-- 1.bootstrap中mark标签定义一个有淡黄色背景的文本 --><p><mark>hello</mark></p><!-- 2.bootstrap中abbr标签定义一个有下划虚线的文本且鼠标经过此文本时显示title中的字符,注意,abbr中一定要加title属性,否则无效 --><p><原创 2021-05-14 22:34:37 · 898 阅读 · 0 评论 -
Bootstrap简介、下载bootstrap及引入文件说明、响应式容器和满屏容器、栅格系统
Bootstrap简介:Bootstrap是Twitter(推特)开发的,目前最受欢迎的前端开源框架,基于jQuery用于开发HTML、CSS、JavaScript,简洁灵活,常用于开发响应式布局及移动端开发。其中文官方文档:http://www.bootcss.com 官网:http://getbootstrap.com 推荐网站:http://bootstrap.css88.com下载bootstrap:拿到bootstrap文件包的方式有很多种,例如:官网下载、npm(后面介绍完node可以原创 2021-05-14 19:53:38 · 1287 阅读 · 5 评论