bootstrap学习
mwwb
这个作者很懒,什么都没留下…
展开
-
Bootstrap(十一)(残)
被csp难倒了,还是继续学我的前端吧下午来学一下bootstrap的扁平化风格页面扁平化设计概述设计理念扁平化的风格式抛弃一切效果,例如阴影、透视、纹理、渐变和3d等,就是避免任何拟物化设计的元素。更有层次感,视觉效果更加鲜明,用户能更直观地了解...原创 2020-06-05 19:20:49 · 114 阅读 · 0 评论 -
Bootstrap(十)
今天学习任务是bootstrap的响应式多媒体响应式之前了解过了,就是自动根据屏幕大小变化这个多媒体包括了图标,图像,视频Bootstrap图标的响应式图标有很多种,有img导入的,还有Sprites(雪碧图),Icon font(字体图标),SVG Icon,DataURI,在技术实现时,需要考虑页面的可访问性、重构的灵活性、可复用性、可维护性。img操作简单方便,只需要更换路径就可以很容易更换图片,但是如果用的过多会增加http的请求数,直接影响页面的加载性能,并且不易与修改图标样式Spr原创 2020-06-05 12:14:44 · 168 阅读 · 0 评论 -
Bootstrap(九)
下午接着学Bootstrap框架插件设计弹出框框架除了提示框外,还提供了一种弹出框,主要是通过添加“.popover”类来实现的,和其他的一样,同时添加其他不同的样式类就可以实现多种多样的样式风格这参考书忒不靠谱,代码又跑不了,我于是又在菜鸟上找了代码教程 <a href="#" data-toggle="popover" title="Example popover"> 请悬停在我的上面 </a> <script> $(function原创 2020-06-04 19:56:04 · 208 阅读 · 0 评论 -
Bootstrap(八)
今天继续学习bootstrap的滚动监听功能实现的主要代码如下:<body> <div> <nav id="navbar-example" class="navbar navbar-default navbar-static"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle co原创 2020-06-04 12:05:21 · 182 阅读 · 0 评论 -
Bootstrap(七)
下午开始学习插件设计所谓插件就是通过js脚本为bootstrap组件赋予的“生命”插件可以一次性引入也可以逐个单一引入data属性框架提供了data属性用于扩展功能,设计的时候可以通过data属性的api来使用所有的bootstrap插件,不需要编写js,这是首推的设计方式data属性方式默认开启,某些特殊情景下需要关闭其关闭代码如下:$(document).off(’.data-api’);也可以通过添加具体插件名字来指定关闭功能在某一插件中$(document).off(’.alert原创 2020-06-03 19:52:46 · 129 阅读 · 0 评论 -
Bootstrap(六)
今天继续组件设计的学习导航条表单可以在导航条中通过"form"标签添加表单,在该表单中可以添加输入框,按钮,搜索等元素输入框通过添加类“navbar-form”建立搜索框通过添加类“navbar-search”建立他这里写两个表单的时候都是使用两层div包起来的,第一层是navbar,第二层是navbar-inner,我在网上搜索了这么做的原因,得到的解释是分开写两层比合写一层,代码上更加层次清晰这个navbar-inner类的不像nav是有预设样式写在css中的,其实还是个空白类,实际应用的时原创 2020-06-03 14:42:57 · 198 阅读 · 0 评论 -
Bootstrap(五)
晚上继续学习组件设计的内容bootstrap按钮式下拉菜单按钮式下拉菜单其实就是把前面两部分内容合在一起先是写一个按钮组的结构,然后在每个按钮中添加内容,把所有按钮改写成下拉菜单的形式难度其实不大,就是代码量比较大。bootstrap的导航首先是默认标签导航这是基于“ul”和"li”标签然后添加.nav-tabs类,还有需要同时添加.nav类<div class="bs-docs-example"> <ul class="nav nav-tabs">原创 2020-06-02 20:37:37 · 268 阅读 · 0 评论 -
Bootstrap(四)
下午开始学习bootstrap组件设计的内容差不多就是在html中经常会重复利用的对象,在bootstrap中预设了一些实例,让使用者用起来非常方便吧下拉菜单通过一个叫.deopdown的类来实现列表下拉,书上的案例有点老了,实现起来遇到了问题,我后来去菜鸟教程上找案例,发现她还额外导入了一个js文件<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <ti原创 2020-06-02 18:21:04 · 145 阅读 · 0 评论 -
Bootstrap(三)
接下来学习bootstrap的样式设计bootstrap的排版标题,页面主题,强调,缩略语,地址,引用,列表,描述,代码bootstrap的默认字体大小为14px,行高为20px,并且这些书信会直接赋予 body 中的元素和所有段落元素。p 元素还被设置了0.5倍行高(10px)的底部外边距,通过添加.lead类也可以让段落突出显示对于需要强调的元素,框架...原创 2020-06-02 14:40:07 · 498 阅读 · 0 评论 -
Bootstrap(二)
了解完bootstrap的基本框架后,开始学习bootstrap的脚手架脚手架 英文原名Scaffolding全局样式所谓全局样式就是通过Bootstrap框架为页面设计的全局CSS样式表,该全局样式表包括基本的html元素样式,以及栅格系统,可以增强页面及其元素的CSS效果需要在html中添加lang=“zh-CN”属性bootstrap定义的内容具体都是存放在源码包scaffolding.less中栅格系统栅格系统是bootstrap的一个特色,可以让页面布局变得更加简单,合理,美观,容原创 2020-06-01 19:31:29 · 179 阅读 · 0 评论 -
Bootstrap(一)
终于在六月一号早上完成了jQuery学习的收尾工作,今天开始要学习Bootstrap了。bootstrap是twitter公司推出的一款前端开发框架,基于css标准构建bootstrap由动态css语言写成,完美地解决了页面响应式设计的难点什么是响应式设计页面?页面可以通过用户的终端设备尺寸或浏览器的窗口尺寸来自动地进行布局调整,这就是响应式布局设计响应式设计四大原则:移动优先orPC优先内容流位图还是矢量图相对单位还是固定单位bootstrap的设计目标:包括目标对象,浏览器支持和响原创 2020-06-01 11:16:35 · 111 阅读 · 0 评论