bootstrap学习笔记 Bootstrap 列表组

【bootstrap学习笔记 Bootstrap 列表组】的更多相关文章

本文将介绍列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素ul 添加class list-group 向li添加class list-group-item 下面的示例演示了这点: HTML <ul class="list-group"> <li class="list-group-item">免费注册域名</li> <li class="list-group-item…

Bootstrap学习2--组件-列表组

备注:最新Bootstrap手册:http://www.jqhtml.com/bootstraps-syntaxhigh/index.html 1.列表组列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件.由于其在Bootstrap是一个独立的组件,所以也对应有自己独立源码: ☑ LESS版本:对应的源码文件 list-group.less ☑ Sass版本:对应的源码文件是 _list-group.scss ☑ 编译出的…

bootstrap学习笔记--bootstrap组件

前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 Bootstrap--表格 Bootstrap--表单 Bootstrap--按钮 Bootstrap--图片 Bootstrap--辅助类 Bootstrap--响应式实用工具 Bootstrap--字体图标 Bootstrap--下拉菜单 Bootstrap--按钮组 Bootstrap--按钮下…

bootstrap学习笔记--bootstrap安装环境

Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本.当您点击这个链接时,您将看到如下所示的网页: 您会看到两个按钮: Download Bootstrap:下载 Bootstrap.点击该按钮,您可以下载 Bootstrap CSS.JavaScript 和字体的预编译的压缩版本.不包含文档和最初的源代码文件. Dow…

bootstrap学习笔记--bootstrap排版类的使用

标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式,这个和一般的html没啥区别.请看下面的实例: <h1>测试1 h1</h1> <h2>测试2 h2</h2> <h3>测试3 h3</h3> <h4>测试4 h4</h4> <h5>测试5 h5</h5> <h6>测试6 h6</h6> 内联子标题如果需要向任何标题添加一个内联子…

bootstrap学习笔记--bootstrap布局方式

Bootstrap 3 是移动设备优先的,在这个意义上,Bootstrap 代码从小屏幕设备(比如移动设备.平板电脑)开始,然后扩展到大屏幕设备(比如笔记本电脑.台式电脑)上的组件和网格. 移动设备优先策略内容决定什么是最重要的. 布局优先设计更小的宽度. 基础的 CSS 是移动设备优先,媒体查询是针对于平板电脑.台式电脑. 渐进增强随着屏幕大小的增加而添加元素. 响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.如下图: Bootstrap 网格系统…

bootstrap学习笔记--bootstrap网格系统

移动设备优先移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动引用另一个 CSS,才能让整个项目友好的支持移动设备. 现在不一样了,Bootstrap 3 默认的 CSS 本身就对移动设备友好支持. Bootstrap 3 的设计目标是移动设备优先,然后才是桌面设备.这实际上是一个非常及时的转变,因为现在越来越多的用户使用移动设备. 为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页…

bootstrap学习笔记--bootstrap概览

HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 Bootstrap 项目的开头包含下面的代码段. <!DOCTYPE html> <html> .... </html> 如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型(Doctype),您可能会面临一些浏览器显示不一致的问题,甚至可能面临一些特定情…

bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

基础导航条在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class="nav">)基础上添加类名"navbar-nav" 第二步:在列表外部添加一个容器(div),并且使用类名"navbar"和"navbar-default"…