bootstrap使用记录

bootstrap学习记录（慕课网教程）

1.当主标题下需要副标题时可在h中嵌套small<h1>nihao<small>a</samll></h1> 2.当某一段落需要突出显示时可添加lead类,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理 class="lead" 3.在普通的元素中我们一般通过font-weight设置为bold关键词给文本加粗.在Bootstrap中,可以使用<b>和<strong>标签让文本直接加粗.…

Bootstrap知识记录：表单和图片

一．表单Bootstrap 提供了一些丰富的表单样式供开发者使用.1.基本格式//实现基本的表单样式<form><div class="form-group"><label>电子邮件</label><input type="email" class="form-control"placeholder="请输入您的电子邮件"></div><div cl…

Bootstrap知识记录：表格和按钮

基本格式.table3.带边框的表格//给表格增加边框<table class="table table-bordered">4.悬停鼠标//让<tbody>下的表格悬停鼠标实现背景效果<table class="table table-hover">5.状态类//可以单独设置每一行的背景样式<tr class="success">注:一共五种不同的样式可供选择.样式说明active 鼠标悬停在行或…

Bootstrap知识记录：排版样式

---恢复内容开始--- 一．页面排版Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用.1.页面主体Bootstrap 将全局font-size 设置为14px,line-height 行高设置为1.428(即20px):<p>段落元素被设置等于1/2 行高(即10px):颜色被设置为#333.//创建包含段落突出的文本<p>Bootstrap 框架</p><p class="lead">Bootstrap 框架<…

Bootstrap学习记录-3.Badge、Breadcrumb、Buttons、 Button Group、Card、Carousel

1. Badge Badge作为数值标记组件,它能作为链接或按钮的一部分来提供计数作用,而且它通过使用相对字体大小来适应父级元素的大小.它的最基本的修饰符为.badge .badge-*. <button type="button" class="btn btn-primary"> Notifications <span class="badge badge-light">4</span> </butto…

Bootstrap学习记录-2.container和table

1. Container Bootstrap中容器类提供了2个类标识:container.container-fluid. 两者的区别在于: container:容器不止有15px的padding,还有一个随着浏览器宽度变化而变化的margin.container-fluid:只有固定的15px的padding. 因此,container类的自适应是通过修改margin的改变来完成的,而container-fluid类的百分百宽度是指在固定的15px的padding前提下宽度总是当前视窗的宽度.…

Bootstrap学习记录-1.Navigation

Bootstrap中的导航栏功能需要添加bootstrap.css.jquery.js.bootstrap.js,其中,jquery.js文件是bootstrap.js文件中必须的,否则就会抛出异常信息:Bootstrap\'s JavaScript requires jQuery. 1. 工作原理学习Navbar之前,学习知道以下知识点: nav标签必须使用.navbar..navbar-expand{-sm|-md|-lg|-xl}.颜色主题类进行装饰. 导航栏内容默认是流动布局,可以使用…

Bootstrap学习记录

中文官网 Bootstrap 插件 Bootstrap Multiselect bootstrap-multiselect 的简单使用,样式修改,动态创建option JS组件系列——Bootstrap Select2组件使用小结基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用 JS组件系列——两种bootstrap multiselect组件大比拼 JS组件系列——再推荐一款好用的bootstrap-select组件,亲测还不错 bootst…

积跬步，聚小流------Bootstrap学习记录(3)

响应式作为Bootstrap的一大特色.栅格系统可谓是功不可没,既然如此,那我们就来看一下栅格系统是怎样帮助bootstrap实现响应式布局的呢? 1.什么是栅格系统我们能够从Bootstrap的官网上找到比較官方的回答:Bootstrap提供了一套响应式.移动设备优先的流失栅格系统,随着屏幕或视口(viweport)的添加,系统会自己主动分为最多12列. 它包括了易于使用的提前定义类,还有强大的mixin用于生成更具语义的布局. 这样的说法是比較精准并且明了的.可是还能够更通俗一点的来解释:…

积跬步，聚小流------Bootstrap学习记录(1)

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"> 1.什么是bootstrap? 2011年8月 Twitter推出的开源的整套前端解决方式简单了说:用以创建web页面的html.css.javascript的前端工具集再简单了说:给对应的结构写好了对应的样式和行为,直接调用就…

积跬步，聚小流------Bootstrap学习记录(2)

现阶段开启每一次新的征程,已然离不开"Hello World"的习惯仪式.这次自然也不例外.先来看下给出的官网给出的演示样例: 1.bootstrap官网提供的html基本模板代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible&qu…

bootstrap table记录一下

$(function() { // 刷新 talbe function refresh() { $("#table").bootstrapTable('refresh'); } $(function() { //初始化表格 var oTable = new TableInit(); oTable.Init(); $("#btn_sus").click(function() { var opts = $('#table').bootstrapTable('getSel…

http://v3.bootcss.com/components/#panels http://v2.bootcss.com/components.html…

记录一个bootstrap惨痛的错误

记录一个bootstrap的错误,这个错误因为我删除了一个class就导致了页面上显示的错误,这是一个惨痛的教训,特此记录,提醒自己在做前端的修改时,一定要慎之又慎.如果真的要做改动,改完之后也要测一下这个class是:btn-group 页面上的效果是这样的:点击Edit Columns会出现下面的下拉框列表,再点击一下Edit Columns之后,下拉框列表会消失这种效果的实现是通过bootstrap来实现的,所用到的代码是这样的一段代码: <div id="editManageC…

基于Metronic的Bootstrap开发框架经验总结（16）-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理

在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件,在很多项目中广泛的应用.Bootstrap-table插件提供了非常丰富的属性设置,可以实现查询.分页.排序.复选框.设置显示列.Card view视图.主从表显示.合并列.国际化处理等处理功能,而且该插件同时也提供了一些不错的扩展功能,如移动行.移动列位置等一些特殊的功能,插件可…

bootstrap fileinput 使用记录

第一次使用bootstrap fileinput碰到了许多坑,做下记录需求本次使用bootstrap fileinput文件上传组件,主要用来上传和预览图片.作为一个后台管理功能,为某个表的某个字段,设置1对n的图片记录网上搜索相关文章大多是一个简单的上传功能,对图片文件预览显示,前后端交互并没多少详细描述实现功能后台界面例子在新增和编辑里,需要添加图片上传显示需求,在这里我设置的字段名以_img结尾的图片都会在编辑新增里显示bootstrap fileinput组件点击选择,选择…

[20180614]删除bootstrap$记录无法启动2.txt

[20180614]删除bootstrap$记录无法启动2.txt --//前几天看链接http://www.xifenfei.com/2018/05/willfully-delete-bootstrap.html.--//按照介绍: 有人在数据库中注入了恶意脚本,导致数据库删除了bootstrap$中数据,关闭之后无法正常启动delete from bootstrap$; --//我更多的思考如果我遇到这个问题如何解决:1.如果有备份只要恢复到delete bootstrap$之前,但是这里有…

[20180612]删除bootstrap$记录无法启动.txt

[20180612]删除bootstrap$记录无法启动.txt --//前几天看链接http://www.xifenfei.com/2018/05/willfully-delete-bootstrap.html.--//按照介绍: 有人在数据库中注入了恶意脚本,导致数据库删除了bootstrap$中数据,关闭之后无法正常启动delete from bootstrap$; --//我更多的思考如果我遇到这个问题如何解决:1.如果有备份只要恢复到delete bootstrap$之前,但是这里有问…