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