随笔分类 - Bootstrap,css3,Html5
1
摘要：本篇体验Webpack的基本面以及一个例子。■ What is Webpack● module bundler● module with dependencies● module generates static assets■ Why Webpack● good for development b...
阅读全文
摘要：当在Brackets中安装上Emmet插件后，就可以使用Emmet的语法来加速前端编写。 有关html ● 子关系> div>ul>li ● 相邻+ div+p+bq ● 上一级^ div+div>p>span+em^bq ● 重复* ul>li*5 ● 分组() div>(header>ul>li*2)+footer>p ● 类 div.demo ● ID d...
阅读全文
摘要：Brackets功能还是很强大的。 官网：brackets.io常见问题解决：https://github.com/adobe/brackets/wiki/Troubleshooting快捷键：https://github.com/adobe/brackets/wiki/Brackets-Shortcuts 首次打开Brackets 首次打开有一个默认页面，右上角的波浪按钮用来预览，被打开...
阅读全文
摘要：这里记录下某段时间Bootstrap的零散碎片。 1、有关Bootstrap的参考网站： ● 官方：http://getbootstrap.com/● 主题：http://bootswatch.com/● Font-Awsome: http://fortawesome.github.io/Font-Awesome/● 幻灯片：lokeshdhakar.com/projects/ligh...
阅读全文
摘要：本篇实践一个多层模态窗口，而且是自适应的。 点击页面上的一个按钮，弹出第一层自适应模态窗口。 在第一层模态窗口内包含一个按钮，点击该按钮弹出第二层模态窗口，弹出的第二层模态窗口会挡住第一层模态窗口，即第二层模态窗口打开的时候，无法关闭第一层模态窗口。 具体页面实现部分如下： ...
阅读全文
摘要：在项目中可能会面对这样的一个场景： 界面上有多个按钮，我们希望点击这些按钮弹出同一个模态窗口，但希望模态窗口的内容是动态生成的，即，点击每个按钮弹出的模态窗口内容不同。 通常情况下，一个按钮对应一个模态窗口。 打开模态窗口 ...
阅读全文
摘要：页脚部分比较简单，把一个12列的Grid切分。 Copyright ©新浪体育 关于我们 ...
阅读全文
摘要：□ ListGroup展示内容 当希望把同类型的内容以列表、区块展示的时候，ListGroup是不错的选择。 马云为恒大生死战开出男人奖 8月27日晚，广州恒大将迎来亚冠联赛生死战，主场迎战西悉尼流浪者队，由于一周之前已经在客场0-1负于对手，本场比赛恒大队必须置死地而后生...
阅读全文
摘要：本篇体验用Tab插件显示内容。Html部分为： 兰帕德宣布退出英格兰队 英超 西甲 ...
阅读全文
摘要：在Bootstrap页面中，通常用Panels来展示主要功能的内容。该部分Html为： 更多信息 广州恒大淘宝队的官方网站和微博同时发布了几张海报，预热本周三晚8点即将到来的亚冠1/4决赛第二回合。 ...
阅读全文
摘要：通常把一些重要信息、需要重点标注的信息放在轮播的下方显示，这部分区域用到了大字体的标题、副标题以及段落文字等。 梅西升腾小宇宙仍是2014年的王 ...
阅读全文
摘要：本篇体验图片轮播。html部分为： ...
阅读全文
摘要：“使用Bootstrap 3开发响应式网站实践”系列，将使用Bootstrap 3.2制作一个自适应网站，无论是在电脑、平板，还是手机上，都呈现比较好的效果。在电脑浏览器上的最终效果如下： 在手机上的呈现效果如下： 本篇主要包括： □ 前期准备□ 引入Bootstrap，jQuey文件等□ 搭建页面主体结构□ 导航区域 □ 前期准备 →使用Visual Studio 2012创建一个空的...
阅读全文
摘要：类似Page Header, Breadcrumbs, Dropdowns等，都是Bootstrap的组件，是静态的。如果涉及到交互，Bootstrap提供了插件。这些插件包括： ○ 过渡效果： bootstrap-transition.js○ 模态对话框：bootstrap-modal.js○ 下拉项：bootstrap-dropdown.js...... 这些插件可以单独引入到页面。而在bo...
阅读全文
摘要：本篇主要包括： ■ Page Header■ Breadcrumbs■ Button Groups■ Dropdowns■ Button Dropdowns■ 用Button和Dropdowns模拟Select■ Input Groups■ Thumbnails■ Panels■ Wells □ Page Header Page Header是指页面最顶部。 ...
阅读全文
摘要：本篇主要包括： ■ 排版■ Button■ Icon■ Nav和NavBar■ List■ Table■ Form 排版 ● 斜体：● 加粗体：● 突出段落：class="lead"● 字体颜色：class="text-success",class="text-muted",class="text-success",class="text-primary",class="text-warnin...
阅读全文
摘要：本篇主要包括： ■ 自定义CSS■ 自定义Theme■ 自定义Package 自定义CSS 有时候，需要自定义或重写Bootstrap默认的CSS。→在css文件夹下创建一个site.css→假设要对container类重写，在site.css中.container { background-color: #eee;}→把site.css引用到index.html中，并放置在bootst...
阅读全文
摘要：本篇主要包括： ■ 添加独立的一行■ 文字环绕■ 图片自适应■ 隐藏元素 添加独立的一行 在id为body的section和id为main的section之间，添加2张图片。 我们发现，新加的2张图片把主体内容挤到了右侧。 那么，我们如何处理新加的2张图片呢？--我们不太可能用container，因为它是页面布局层面的类名。但我们可以把这2张图片放在class名为row的div中。 我们还...
阅读全文
摘要：本篇主要包括： ■ Grid简介■ 应用Grid■ Multiple Grids Grid简介 Bootstrap中，把页面分成12等份，这就是所谓的Grid。 在Bootstrap中，用类名控制，这些类型遵循".col-xx-6"类似的形式。 2个6就占满整个页面。所以，类名最后面的数字表示要占几个格子。 又比如，3个4也占满整个页面。 又比如，4个3也占满整个页面。 又比如，6个...
阅读全文
摘要：本篇主要包括： ■ 下载Bootstrap 3■ Bootstrap 3引入页面 下载Bootstrap 3 →打开网站：http://getbootstrap.com/→点击屏幕中央位置的Download Bootstrap按钮→来到Bootstrap的下载页，有3个按钮可供选择：Download Bootstrap, Download source, Download Sass，本人选择...
阅读全文
1
