My前端bootstrap(一)

格网系统(Grid System).默认的Bootstrap格网系统提供一个宽达940像素的,12列的格网。这意味着你页面默认宽度是940px,最小的单元要素宽度是940/12px.Bootstrap能够使得你的网页可以更好地适应多种终端设备(平板电脑,智能手机等)。默认格网系统直观概念如图1-1所示:

在bootstrap中实现嵌套列非常简单,只需要在原有的div中加入.row 和相应的长度的span* div即可。

<div class="row">
  <div class="span12">
    Level 1 of column
    <div class="row">
      <div class="span6">Level 2</div>
      <div class="span6">Level 2</div>
    </div>
  </div>
</div>

将.row 改成.row-fluid ,就可以将fixed行改为fluid.也就是流式格网系统

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

固定布局

<body>
  <div class="container">
    ...
  </div>
</body>

流布局

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

参考文献与延伸阅读:

1.Bootstrap的来由和发展。http://www.alistapart.com/articles/building-twitter-bootstrap/

2.Less与Sass的介绍与对比.http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/

3.Html5模板 http://html5boilerplate.com/

4.Html5与Bootstrap混合项目(H5BP)https://gist.github.com/1422879

5.20个有用的Bootstrap资源 http://www.webresourcesdepot.com/20-beautiful-resources-that-complement-twitter-bootstrap/

6.Bootstrap按钮生成器 http://charliepark.org/bootstrap_buttons/

7.前后端结合讨论  http://stackoverflow.com/questions/9525170/backend-technology-for-front-end-technologies-like-twitter-bootstrap

8. Bootstrap英文教程  http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/stepping-out-with-bootstrap-from-twitter/

时间: 2024-09-30 00:09:53

My前端bootstrap(一)的相关文章

My前端bootstrap(三)

Bootstrap作为完整的前端工具集,内建了大量的强大优雅可重用的组件,包括按钮(Button),导航(Navigation),标签(Labels),徽章(Badges),排版(Typography),缩略图( thumbnails),提醒(Alert),进度条(progress bar),杂项(Miscellaneous).本讲将深入讲解这些内容. 1.1 按钮组(button group) 按钮组顾名思义是将多个按钮集合成一个页面部件.只需要使用btn-group类和一系列的<a>或者&

tips 前端 bootstrap 嵌套行 嵌套列 溢出 宽度不正确 栅格化系统计算

bootstrap 当嵌套列时 有时会出现很奇异的row 的width不对问题出现的情况时 1 <div class="row" > <!--row a--> 2 <div class="col-xs-12 col-lg-6 col-lg-offset-3"> 3 <div class="row"> <!-- row b--> 4 <div class="col-xs-1

前端-BootStrap

bootstrap 英 /'bu?tstræp/ 美 /'b?t'stræp/ n. [计] 引导程序,辅助程序:解靴带 关于 BootCDN BootCDN 是 Bootstrap 中文网支持并维护的前端开源项目免费 CDN 服务,致力于为 Bootstrap.jQuery.Angular.Vuejs 一样优秀的前端开源项目提供稳定.快速的免费 CDN 加速服务. BootCDN 所收录的开源项目主要同步于 cdnjs 仓库. 自2013年10月31日上线以来已经为30多万家网站提供了稳定.可

Web前端-bootstrap

1.bootstrap简介 - 在GitHub上的开源产品 - 快速开发Web应用程序和网站的前端框架 - 支持响应式布局.(是指兼容多种终端设备访问(电脑.平板.手机)) 2.部署bootstrap - 1.下载bootstrap框架 http://www.bootcss.com--选择bootstap3 --生产环境 - 2.解压压缩包--用3个文件--css/fonts/js - 3.讲解这3个文件夹 -css: bootsrap.css bootsrap.min.css(压缩版,小一些)

前端——Bootstrap

Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 以前自己写的html的缺点: 命名:重复.复杂.无意义(想个名字费劲) 样式:重复.冗余.不规范.不和谐 页面:错乱.不规范.不和谐 Bootstrap的优点: 各种命名都统一并且规范化. 页面风格统一,画面和谐. Bootstrap环境搭建 目录的结构: bootstrap-3.3.7-dist/ ├── css //

54 前端--Bootstrap框架

目录 bootstrap 起步 基本模板 栅格系统 栅格参数 流式布局容器 列偏移 col-md-offset-x 列嵌套 CSS样式 主标题 副标题 文本对齐 文本大小写 辅助类 文本颜色 关闭按钮 下拉三角 快速浮动 清除浮动 显示与隐藏 表格 状态类 背景色 按钮 按钮样式: 按钮大小: 图片 图片形状 Bootstrap组件 目录: 响应式开发 为什么要进行响应式开发? 什么是响应式? 用到的技术: JavaScript插件 模态框 轮播图 Carousel bootstrap Boot

My前端bootstrap(二)

基于手脚架(Scaffolding)之上,Bootstrap的基础CSS(Base CSS)提供了一系列的基础Html页面要素.本文将主要深入讲解排版(Typography),表格(Table),表单(Forms),按钮(Buttons)这四个方面的内容. 1.排版 (Typography),它囊括标题(Headings),段落 (paragraphs), 列表(lists)以及其他内联要素 <div class="row"> <div class="spa

Bootstrap Table SpringMVC基本功能实现

首先是版本介绍 <前端>bootstrap.min.css 3.2.0,bootstrap.min.js 3.2.0,jquery 1.11.3,modal.js 3.2.0,bootstrap-table.js 1.3.0;<后台>Spring MVC 4.1.5 这里是前端代码 bootstrap-table.jsp 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu

zabbix 二次开发之同步CMDB主机和模板绑定

最近在做zabbix的二次开发:发现zabbix在做自动化方便提供了强悍的支持,下面分享下CMDB和zabbix打通,把CMDB平台里面的所有机器同步到zabbix数据库,然后进行批量的模板绑定: 开发环境: zabbix :2.4 python:flask框架.前端bootstrap,jquey: 实现思路: 一. 在CMDB表和ZAbbix主机表里面建立第三张管理的表(定义叫缓存表):利用zabbix API把数据库里面的host插入到第三张缓存表:然后通过和CMDB库里面的比较把没有在缓存