Bootstrap
关注
分享
扫一扫
海涛高软
这个作者很懒，什么都没留下…
展开
-
在线接口测试工具
在线HTTP接口测试工具 - GetmanFR：徐海涛(hunk Xu)QQ技术交流群：386476712原创 2022-01-13 15:40:10 · 7520 阅读 · 0 评论 -
form-group 两种常用使用
用法一： 运行结果如下： form-group ：增加盒子的下边界 form-control： 充满整个父元素，并且有换行作用用法二： 运行结果如下： FR:海涛高软（QQ技术交流群：386476712）原创 2017-03-19 22:16:23 · 37677 阅读 · 4 评论 -
middle-box
在Bootstrap框架中，middle-box这个类属于style.css样式表使用截图： 把middle-box这个类取消掉，然后运行页面，结果截图如下： FR:海涛高软（QQ技术交流群：386476712）原创 2017-03-19 21:08:03 · 1118 阅读 · 0 评论 -
media-list/media/pull-left/media-body/media-heading 多媒体对象（Bootstrap）
上面代码运行效果如下： FR:海涛高软（QQ技术群：386476712）原创 2017-01-16 16:28:50 · 1410 阅读 · 0 评论 -
users-list/chat-user/chat-avatar/chat-user-name 聊天效果
chat-user不能去掉，否则底部没有边框，一个chat-user代表一个用户 FR:海涛高软（QQ技术群：386476712）原创 2017-01-05 18:59:19 · 551 阅读 · 0 评论 -
modal (Bootstrap)
上面代码运行效果：有时候，你会发现如下这种层次结构： FR:海涛高软（QQ技术交流群：386476712）原创 2017-01-09 14:09:44 · 403 阅读 · 0 评论 -
form-group与input-group （Bootstrap）
整体是一个from-group，下面分两列，一列放入文本标签，一列放入输入项文本标签要加上control-label类修饰，其实control-label 具有靠右对齐功能input标签加上form-control类修饰，使输入框更加好看输入项中每一行都要用input-group修饰最后运行的效果如下： 再举一个例子运行效果如下： 运行后的效果如下： input-group表示一行 form原创 2017-01-04 10:49:45 · 33655 阅读 · 2 评论 -
form-inline+form-group 实现表单横排显示（Bootstrap）
先看一个例子，代码如下：运行后的效果如下：FR：海涛高软（QQ技术群：386476712）原创 2017-01-15 15:41:17 · 23226 阅读 · 1 评论 -
导航条(navbar) （Bootstrap）
这篇文章主要看看各种navbar的使用，了解一下具体使用的样式FR:海涛高软（QQ技术群：386476712）原创 2017-01-09 17:23:04 · 1728 阅读 · 0 评论 -
content+header+breadcrumb+container+toolbar（Bootstrap）
运行效果如下：FR:海涛高软（QQ技术群：386476712）原创 2017-01-09 16:38:25 · 531 阅读 · 0 评论 -
navbar （Bootstrap）
FR:海涛高软（QQ技术群：386476712）原创 2017-01-09 15:56:55 · 427 阅读 · 0 评论 -
breadcrumb （Bootstrap）
运行效果如下：FR：海涛高软（QQ技术群：386476712）原创 2017-01-09 14:57:53 · 560 阅读 · 0 评论 -
UI高级控件 （Bootstrap）
1 切换按钮开关：说明： 使用比较简单，只需要添加js-switch类即可，checked表示选中按钮，不带checked表示未选中2 复选框和单选框说明： 一： 开发时基于checkbox这个类的，checkbox-primary表示按钮选中的颜色，还有其它几个类也表示颜色： checkbox-success、checkbox-info、checkbox-warning、checkbo原创 2017-01-07 10:16:26 · 1311 阅读 · 0 评论 -
carousel（Bootstrap）
运行后的效果如下：可以为每一张图添加点文字说明，如下：添加后的效果如下：可以添加滚动选项圆点标识符运行后的效果如下：FR：海涛高软（QQ技术群：386476712）原创 2017-01-06 15:55:18 · 504 阅读 · 0 评论 -
Bootstrap常用表单组件
1 复选框 <div class="checkbox checkbox-info"> <input id="checkbox4" type="checkbox"> <原创 2017-04-07 14:59:54 · 3818 阅读 · 1 评论 -
form-inline、form-control和form-group
FR:Hunk xu (QQ技术交流群：386476712）原创 2017-03-19 22:39:09 · 41482 阅读 · 1 评论 -
Bootstrap 模态对话框
最后运行的画面如下： 最后总结：modal-dialog 以对话框形式打开modal-content： 对话框以白色背景显示class="close" 关闭叉按钮在右上角显示data-dismiss="modal" 关闭模态对话框modal-body 模态对话框四周添加一原创 2017-03-22 17:49:22 · 1881 阅读 · 1 评论 -
Vue 简单案例练习
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue 测试实例</title> <style> /* 可以设置不同的进入和离开动画 */ /* 设置持续时间和动画函数 */ ...原创 2019-08-08 17:31:41 · 1157 阅读 · 0 评论 -
bootstrap布局
左右居中 <div class="row"> <div class="col-sm-8 col-sm-offset-2" >原创 2019-06-16 16:21:59 · 192 阅读 · 0 评论 -
Bootstrap警告面板
<div class="alert alert-success"> <button class="close" data-dismiss="alert">×</button> 面板 </div>最后效果如下： 说明： close类具有：右浮动的特性 data-dismiss=”alert” 关闭面板FR:海涛高软（QQ技术交流群：3原创 2017-04-26 17:09:08 · 780 阅读 · 0 评论 -
表单 模板（很实用）
效果图如下：代码如下： <div class="ibox-content"> <form class="form-horizontal J_menuItem" action="#" method="post"> <div class="form-group "> <label class="col-sm-2 contr原创 2017-05-05 15:33:37 · 4946 阅读 · 1 评论 -
导航栏（Bootstrap）
<nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a href="index.html" class="navbar-brand">海涛高软</a> </div> <ul class="nav原创 2017-01-16 20:45:23 · 640 阅读 · 0 评论 -
购物车界面（Bootstrap）
<div class="table-responsive m-t"> <table class="table invoice-table"> <thead> <tr>原创 2017-05-03 16:47:19 · 15216 阅读 · 0 评论 -
轮播图 （Bootstrap）
效果图如下： <div class="carousel slide" id="carousel2"> <ol class="carousel-indicators"> <li data-slide-to="0" data-target="#carousel2" class="a原创 2017-05-03 15:19:49 · 1056 阅读 · 0 评论 -
ibox (bootstrap)
效果图如下：div class="ibox float-e-margins"> <div class="ibox-title"> <h5>圆形图标按钮</h5> <div class="ibox-tools">原创 2017-05-03 13:58:21 · 9873 阅读 · 0 评论 -
Bootstrap实现下拉列表的两种写法
第一种写法：<div class="dropdown"> <a data-toggle="dropdown">点击打开一个下拉框</a> <ul class="dropdown-menu"> <li><a>aaaa</a></li> <li><a>aaaa</a></li> <li><a>aaaa</a></li> <原创 2017-05-03 10:32:36 · 1649 阅读 · 0 评论 -
Bootstrap 常用知识点汇集
1 可以打单独的设置表格的某一个单元格的背景色，属性为bgcolor,也可以设置某个单元格的对齐方式属性为align,也可以通过width属性设置某个单元格的宽度FR:海涛高软（QQ技术交流群：386476712）原创 2017-04-26 16:27:43 · 892 阅读 · 0 评论 -
模态、下拉菜单 、切换标签页 区别 (Bootstrap)
模态和切换标签页 ： 用的是data-toggle和data-target这两个属性下拉菜单：用的是data-toggle和id这两个属性<ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" data-target="#haitao">xuhaitao</a></li> <li> <a da原创 2017-05-01 16:57:42 · 1161 阅读 · 0 评论 -
BootStrap 表格具体应用
<table class="table table-bordered"> <tr> <td width="15%" align="right" bgcolor="#f1f1f1">现付：</td> <td width="23%">原创 2017-04-06 16:10:41 · 401 阅读 · 0 评论 -
data (Bootstrap)
还有一种选择范围的样式比较常用：时间范围运行效果如下：FR：海涛高软（xuhaitao）原创 2017-01-06 18:22:43 · 278 阅读 · 0 评论 -
clockpicker （Bootstrap）
运行的结果如下：使用也比较简单，就是添加clockpicker这个类即可，如果data-close设置为false，则时钟选择界面就不会自动关闭FR：海涛高软（QQ技术群：386476712）原创 2017-01-06 18:08:23 · 2385 阅读 · 0 评论 -
ibox、ibox-title、ibox-content (Bootstrap)
FR：海涛高软（QQ技术交流群：386476712）原创 2017-01-04 12:48:12 · 18367 阅读 · 0 评论 -
富文本编辑器(Bootstrap)
加入富文本编辑器，很简单，添加一个summernote类即可FR:徐海涛（Hunk Xu)原创 2017-01-04 15:43:02 · 2701 阅读 · 2 评论 -
alert类(Bootstrap)
FR:徐海涛（Hunk Xu）原创 2017-01-04 17:01:40 · 836 阅读 · 0 评论 -
forum（Bootstrap）
forum系列类实现的效果如下： <div class="forum-title"> <div class="pull-right forum-desc"> <samll>总贴子数：17,800,600</s原创 2017-01-04 18:19:49 · 935 阅读 · 0 评论 -
list-group（Bootstrap）
主要用到的类： list-group、list-group-item最后实现的效果如下：再看一个例子：代码运行后的效果如下： 加上active类，就会有军绿背景再看一个例子如下：运行后的效果如下： FR：海涛高软（QQ技术交流群：386476712）原创 2017-01-05 16:20:39 · 3648 阅读 · 0 评论 -
wells 效果 （Bootstrap）
首先看看wells效果如下：FR：徐海涛（Hunk Xu)原创 2017-01-05 16:43:35 · 823 阅读 · 0 评论 -
时间轴（Bootstrap）
FR：海涛高软（QQ交流群：386476712）原创 2017-01-05 16:11:32 · 22335 阅读 · 3 评论 -
响应式表格（Bootstrap）
FR：海涛高软（QQ技术群：386476712）原创 2017-01-05 15:31:56 · 1682 阅读 · 0 评论 -
full-height-scroll类（Bootstrap）
实现面板内部的滚轮滚动，而非整个页面的滚动FR：海涛高软（QQ技术群：386476712）原创 2017-01-05 15:12:31 · 1681 阅读 · 0 评论