随笔分类 - Bootstrap
摘要：单页面结构简单、布局清晰，常常用来做手机 App 或者某个产品的下载介绍页面。现在，展示型网页整体趋向于单页网站设计，这样一次性把核心信息展现出来，对于用户来说更加直观和简单，能够快速了解一个产品。
阅读全文
摘要：一、介绍 社交媒体网站盛行，人们常常会使用评论表达自己的观点，评论功能已然成为网站的一部分。 二、知识点 2.1 媒体对象 官方解释：这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。 2.1.1 基础媒体对象 一个基
阅读全文
摘要：注册和登录在社交和商业网站中是必不可少的一个部分。
阅读全文
摘要：响应式布局就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。导航栏与轮播在大部分网站的头部占很高的比重，特别是导航栏，扮演着网站地图的角色。在响应式布局中，要求导航栏能够根据终端屏幕大小显示不同的样式。
阅读全文
摘要：讲 Bootstrap 基础的教程网上已经很多了，实际上 Bootstrap 中文网（bootcss.com）里的文档已经写的很详细了，但实战的案例却不多。这里用一些当前流行的网页布局为导向，使用 Bootstrap 中的样式来完成它。每次只讲与案例相关的知识点，边学边练，加强理解。练习本案例需有
阅读全文
摘要：1、导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外，如前面介绍的下拉菜单、按钮组、导航、分页等。他还包括一些JavaScript的插件。 Bootstrap的JavaScript插件可以单独导入到页面中，也可以一次性导入到页面中。因为在Bootstrap中的JavaSc
阅读全文
摘要：1、缩略图（一） 缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。 使用方法： 通过“
阅读全文
摘要：1、导航条基础 导航条（navbar）和上一节介绍的导航（nav），就相差一个字，多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。 2、基础导航条 在B
阅读全文
摘要：代码： 导致间距不同的不是什么代码问题，而是空格问题。原代码<div class="navbar navbar-default" role="navigation">的后面，<div class="navbar-header">前面有2个空格，删掉后错位就消失了。看来还得使用Tab而不是空格来缩进。
阅读全文
摘要：1、下拉菜单（基本用法） 在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。当然，如果你使用的是未编译版本，在js文件夹下你能找到一个名为“dropdown.js”的文件。你也可以调用这个js文件。在使用Bootstrap框架中的下拉菜单组件
阅读全文
摘要：1、实现原理 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。 <div class="row"> <div c
阅读全文
摘要：1、标题 <h1>~<h6>，所有标题的行高都是1.1（也就是font-size的1.1倍）。 2、副标题 <small>，行高都是1，灰色（#999） <h1>主标题 <small>副标题</small> </h1> 3、Body样式 4、<p>，段落样式 5、强调样式 .lend 6、粗体<b>
阅读全文
摘要：1、<meta http-equiv="X-UA-Compatible" content="IE=edge"> 让IE运行最新的渲染模式。 2、<meta name="viewport" content="width=device-width, initial-scale=1"> 初始化移动浏览显示
阅读全文
