![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Bootstrap
文章平均质量分 57
小萝莉_Lolita
做自己的superman
展开
-
Bootstrap辅助类和响应式工具
辅助类 Bootstap在布局方面提供了一些细小的辅助样式,用于文字颜色以及背景色的设置、显示关闭图标等等1.情景文本颜色 样式名 描述 text-muted 柔和灰 text-primary 主要蓝 text-success 成功绿 text-info 信息蓝 text-warning 警告黄 text-danger 危险红<p cla原创 2017-07-14 22:30:51 · 565 阅读 · 0 评论 -
Bootstrap轮播插件
轮播插件就是将几张同等大小的大图,按照顺序依次播放<!--分析一下轮播插件的组成:1.最外层容器div:加类class="carousel slide" 为了不显示白色多余部分,设置宽度=图片宽度2.轮播圆点:放在容器有序列表中,ol加类class="carousel-indicators",li加data-target="最外层容器" data-slide-to="0"(图片索引,从0开原创 2017-07-18 15:43:21 · 735 阅读 · 0 评论 -
Bootstrap按钮和折叠插件
按钮 可以通过按钮插件创建不同状态的按钮//单个切换<button class="btn btn-default" data-toggle="button" autocomplete="off">按钮</button>注:在Firefox多次页面加载时,按钮可能保持表单的禁用或选择状态,解决方案是:添加autocomplete=”off”<!-- 单选按钮1.label加类btn btn-原创 2017-07-18 11:40:03 · 658 阅读 · 0 评论 -
Bootstrap:表单和图片
表单 1.基本格式:实现基本的表单样式<form> <div class="form-group"> <label>电子邮件</label> <input type="email" class="form-control" placeholder="请输入您的电子邮件" > </div> <div class="form-grou原创 2017-07-09 16:48:51 · 722 阅读 · 0 评论 -
Bootstrap前端框架
Bootstrap前端小白,关于前端的都学学,有砖轻拍~ Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是一个基于 HTML、CSS、JavaScript 的开源框架,它简洁灵活,可用于快速、简单地构建基于PC及移动端设备的Web页面需求。 Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。 Bootstrap最为原创 2017-07-09 13:37:30 · 908 阅读 · 0 评论 -
Bootstrap标签页和工具提示插件
标签页插件 标签页就是通常所说的选项卡功能//也可以换成胶囊式//<ul class="nav nav-pills"><ul id="nav" class="nav nav-tabs"> <li class="active"><a href="#html5">HTML5</a></li> <li><a href="#bootstrap">Bootstrap</a></li>原创 2017-07-17 22:54:11 · 812 阅读 · 0 评论 -
Bootstrap模态框插件
模态框插件:交互式网站常见的弹框功能插件一、基本使用:使用模态框的弹窗组件需要三层div容器元素:modal(模态声明层)dialog(窗口声明层)body(主体)footer(注脚)<!-- 模态声明,show表示显示 --><!-- fade设置淡入淡出效果 --><div class="modal show fade" tabindex="-1"> <!-- 窗口声明原创 2017-07-17 16:03:29 · 609 阅读 · 0 评论 -
Bootstrap列表组、面板和响应式嵌入组件
列表组组件 列表组组件用于显示一组列表的组件<ul class="list-group"> <!-- 列表项带勋章 --> <li class="list-group-item">1.这只是开始 <span class="badge">10</span></li> <li class="list-group-item">2.这是第二条数据</li> <li cl原创 2017-07-17 11:45:53 · 682 阅读 · 0 评论 -
Bootstrap进度条媒体对象和Well组件
Well组件 可以实现简单地嵌入效果Well 是一种会引起内容凹陷显示或插图效果的容器 div中,为了创建 Well,只需要简单地把内容放在带有 class .well 的div中即可<!-- Well组件:嵌入效果 --> <div class="well">一辈子很长</div> <div class="well well-lg">要跟有趣的人</div>原创 2017-07-16 23:08:57 · 606 阅读 · 0 评论 -
Bootstrap巨幕页头缩略图和警告框组件
巨幕组件 巨幕组件主要是展示网站的关键性区域<!-- 固定范围内,有圆角 --><div class="container"> <div class="jumbotron"> <h2>网站标题</h2> <p>这是一个学习性网站</p> <p><a href="#" class="btn btn-default">更多内容</a></p原创 2017-07-16 15:55:50 · 829 阅读 · 0 评论 -
Bootstrap路径分页标签和徽章组件
路径组件 路径组件也叫面包屑导航<ol class="breadcrumb"> <li><a href="#">首页</a></li> <li><a href="#">产品列表</a></li> <li class="active">韩版2015年羊绒毛衣</a></li></ol>分页组件 提供带有展示页面的功能<!-- 默认分页 --><ul class=原创 2017-07-16 12:09:49 · 600 阅读 · 0 评论 -
Bootstrap输入框和导航组件
输入框组件 文本输入框就是可以在input元素前后加上文字或按钮,可以实现对表单控件的扩展<!--在左侧添加文字--><div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control"></div><!--在右侧添加文字--><原创 2017-07-15 21:34:11 · 545 阅读 · 0 评论 -
Bootstrap图标菜单按钮组件
小图标组件 Bootstrap提供了免费的263个小图标,具体可以参考中文官网的组件连接 使用i或者span标签来配合使用<!--使用小图标--><i class="glyphicon glyphicon-star"></i><span class="glyphicon glyphicon-star"></span><!--也可以结合按钮--><button class="btn b原创 2017-07-15 10:36:05 · 2102 阅读 · 0 评论 -
Bootstrap栅格系统
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统 一.移动设备优先 H5项目中,meta用于设置屏幕和设备等宽以及是否运行用户缩放及缩放比例的问题。 <!--含义:屏幕宽度和设备一致,初始缩放比例,最大缩放比例(不允许用户缩放)--> <meta name="viewport" content="width=device-width,initial-sc原创 2017-07-14 21:47:00 · 571 阅读 · 0 评论 -
Bootstrap附加导航插件
附加导航即粘贴在屏幕某处实现锚点功能。 附加导航(Affix)插件允许某个div固定在页面的某个位置。您也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始,但当页面点击某个标记,该div 会锁定在某个位置,不会随着页面其他部分一起滚动。 当页面内容过多出现滚动条时的浮动导航,如官网页面的左侧导航(下图红框内所示)。其实这组件很简单,就是通过检测滚动位原创 2017-07-18 18:24:44 · 2218 阅读 · 0 评论