作者:拍友2702936504 | 来源:互联网 | 2020-08-22 11:00
本篇文章就给大家带来bootstrap学习笔记之bootstrap常用组件介绍。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。如果大家想要学习和获取更多的bootstrap相关视频教程也可以访问:bootstrap教程!
本篇文章就给大家带来BootStrap学习笔记之BootStrap常用组件介绍。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。如果大家想要学习和获取更多的bootstrap相关视频教程也可以访问:bootstrap教程!
1、图标: 图标
2、按钮: 按钮
按钮
primary
success
info
warning
danger
3、按钮尺寸: 按钮尺寸
按钮
primary
success
info 4、把图标显示在按钮里: 把图标显示在按钮里
按钮 5、下拉菜单:
交互:监听每个菜单的点击事件,点击之后在title显示当前菜单
$('.dropdown-item').click(function () {
$('#dropdown-title').text($(this).text());
}); 6、输入框: 输入框
7、导航栏:
导航栏
8、表单:
表单
File input
Example block-level help text here.
Check me out
Submit
9、警告框:
警告框
×
Warning! Better check yourself, you're not looking too good.
success!
info!
warning!
danger!
10、进度条: 进度条
70%
11、靠右排列 一般我们是用float:right来实现向右浮动的功能的,但是这里面右涉及了清除浮动、调整右边的margin、上下的margin等等问题,在bootstrap当然要用他的方法,只要添加一个class:pull-right就可以解决:
item1
item2
这第一行是要跟第二行在一个水平线上的,所以第一行不能用
之类的,因为这种元素自带换行功能。12、tab的使用 tab可以方便的在一个页面里面切换显示的内容,bootstrap的tab使用非常简单:
这是宝贝管理页面
这是tab1
这是tab2
这是tab3
在js可以方便的捕捉tab的切换,并做出相应的改变,比如当第二个页面是加载一些数据,那么我等到切换到第二个页面我再去加载:
$('a[data-toggle="tab"]').on('shown.bs.tab',function (e) {
var activeTab = $(e.target).text();
alert(activeTab);
}); 13、bootstrap-table 一个可以通过ajax请求json数据并生成表格的插件
项目地址:
https://github.com/wenzhixin/bootstrap-table
14、通知消息组件 <1>下载地址: https://github.com/CodeSeven/toastr
<2>文档: http://www.ithao123.cn/content-2414918.html
<3>引入: 在下载的文件里找到build文件夹,引入里面的toastr.min.js和toastr.css
<4>使用: 此提示消息默认是显示在浏览器的右上角,我们可以在初始化里面改为顶部居中显示:
toastr.options.positiOnClass= &#39;toast-top-center&#39;;//显示位置 位置显示的设定有如下选项:
toast-top-right
toast-botton-right
toash-bottom-left
toast-top-left
toast-top-full-width 这个是在网页顶端,宽度铺满整个屏幕
toast-bottom-full-width
toast-top-center顶端中间
toast-bottom-center 然后在我们需要显示的时候这样调用就行了:
toastr.success(&#39;提交数据成功&#39;);
toastr.error(&#39;Error&#39;);
toastr.warning(&#39;只能选择一行进行编辑&#39;);
toastr.info(&#39;info&#39;); 15、ajax请求 按钮:
换个密码
js:
$(&#39;.btn&#39;).on(&#39;click&#39;,function () {
$.post(&#39;xxx&#39;)
.done(function (result) {
var json = ajaxResultShow(result);
if (json.result_code == 0)
$(&#39;#pwdId&#39;).text(json.data1);
})
.fail(function () {
})
.always(function () {
});
}); 16、bootstrap-switch (1)此组件不属于bootstrap,他需要单独引入bootstrap-switch.min.js和bootstrap-switch.min.css;
(2)下载地址:http://www.bootcss.com/p/bootstrap-switch/
(3)使用方法:
添加框架:
在html中添加组件:
在js中初始化:
$("[name=&#39;my-checkbox&#39;]").bootstrapSwitch();
可以在初始化中直接对状态进行设定:
$("#isOpenCheckbox").bootstrapSwitch(&#39;state&#39;,false); 切换状态:
$(&#39;#isOpenCheckbox&#39;).bootstrapSwitch(&#39;toggleState&#39;); 监听切换事件:
$(&#39;#isOpenCheckbox&#39;).on(&#39;switchChange.bootstrapSwitch&#39;, function (event,state) {
alert(state);// true || false
}); 总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。
以上就是BootStrap学习笔记之BootStrap常用组件介绍的详细内容,更多请关注 第一PHP社区 其它相关文章!