bootstrap 之准备开发

原创 2013年12月02日 15:19:10

定制bootstrap

所有效果和插件都导入页面,会增加带宽负荷,发生冲突

http://getbootstrap.com/customize/

下载预编译版

https://github.com/twbs/bootstrap/releases/download/v3.0.2/bootstrap-3.0.2-dist.zip

https://github.com/twbs/bootstrap/archive/v3.0.2.tar.gz

下载源代码版

https://github.com/twbs/bootstrap/archive/v3.0.2.zip

Bootstrap 文件结构

bootstrap图片是使用ImageOptim工具进行压缩的

bootstrap.css 完整的boostrap样式表

bootstrap-responsive.css响应式布局,必须置于bootstrap.css之后,否则不具有响应式布局的功能

bootstrap.js 所有JavaScript响应式布局

编码规范

在导入CSS文件时,应该明确定义rel和type声明

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">

图片的智能响应

参见https://github.com/filamentgroup/Responsive-Images

需要使用两个相关文件rwd-images.js和.htaccess

使用rwd-images.js检测当前设备的屏幕分辨率,如果是大屏幕设备,向页面头部区域添加Base标记

.htaccess文件决定请求所需要的是原始图片还是小尺寸的图片

响应式设计

1.添加meta标签

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

2.启用响应式CSS

 <link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">   

文本风格

<h3>强调</h3>
<p class="muted">提示</p>
<p class="text-warning">警告类文本</p>
<p class="text-error">错误类文本</p>
<p class="text-info">通知类文本</p>
<p class="text-success">成功类文本</p>

文本对齐风格

<p class="text-left">文本左对齐</p>
<p class="text-center">文本居中对齐</p>
<p class="text-left">文本左对齐</p>

缩略语风格

<p> <abbr class="initialism" title="Cascading Style Sheets">CSS</abbr>是层叠样式 </p>

地址风格

<address>
    <a href="mailto:wengcc@ihep.ac.cn">地址</a> <br>
    A <br>
    B <br>
</address>

引用风格

<blockquote cite="http://www.baidu.com" class="pull-right">
    <p> 101010101010101010101010 </p>
</blockquote>

代码块

<p>PHP的变量名 <code> $i=1;</code> </p>
<pre> hello </pre>

缀式文本框

<div class="input-prepend">
    <span class="add-on">E-mail</span>
    <input class="span2" id="prependedInput" type="text" placeholder="xxx@xx.xx">
</div>
<div class="input-append">
    <input class="span2" type="text" id="appendedInput">
    <span class="add-on">@ihep.ac.cn</span>
</div>
<div class="input-prepend input-append">
    <span class="add-on">E-mail</span>
    <input class="span2" type="text" id="prependedInput" placeholder="Email">
    <span class="add-on">@163.com</span>
</div>
<div class="input-prepend input-append">
    <input type="button" class="btn" value="user" />
    <input type="text" />
    <button class="btn">注册</button>
</div> 

下拉按钮

<div class="input-prepend input-append">
    <input type="button" class="btn" value="Email">
    <input type="text">
    <div class="btn-group">
        <button class="btn">@163.com</button>
        <button class="btn" data-toggle="dropdown" tabindex="-1">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">@126.com</a></li>
            <li><a href="#">@sohu.com</a></li>
            <li><a href="#">@qq.com</a></li>
            <li><a href="#">@263.com</a></li>
        </ul>
    </div>
    <button class="btn">登录</button>
</div>

搜索框

<form class="form-search" action="">
    <div class="input-append">
        <input class="span3" type="text">
        <button class="btn" type="submit">快速搜索</button>
    </div>
</form>

<form class="form-search" action="">
    <input type="text" class="search-query">
</form>
//可以使用form-inline类将表格以行内显示 

http://www.berlinix.com/web/Bootstrap.php

http://kanoha.org/page/2/

http://www.oschina.net/p/topcoat





bootstrap 之准备开发

定制bootstrap 所有效果和插件都导入页面,会增加带宽负荷,发生冲突
  • wcc526
  • wcc526
  • 2013年12月02日 15:19
  • 2710

从事软件开发工作前应该做好哪些准备?

从事软件开发工作前应该做好哪些准备? CnPack 开源软件项目 2008-03-20 09:52:25 从事软件开发工作前应该做好哪些准备 作者:巴哈姆特 http://www.cn...
  • gencheng
  • gencheng
  • 2013年04月27日 13:39
  • 5155

微信公众平台开发前的准备工作(转载自walkingmanc的专栏)

1.   申请微信公众号     我们要进行微信公众平台的开发,第一步当然是要有公众号了。什么?不知道什么是微信公众号,看来你还要先回炉炼炼了,呵呵。通俗的说,我们微信平台就好像是一个大社会,里面有...
  • jiangweicpu
  • jiangweicpu
  • 2014年03月14日 11:04
  • 8453

Bootstrap 3.0 响应式多终端支持的站点开发 - 基本介绍与开发环境准备

前置要求: 熟悉并会使用HTML熟悉并会使用CSS熟悉并会使用Javascript熟悉一种会制作html的开发工具,新手推荐使用Editplus 课程目标:这一章节,是让大家先做好开发前的准备工...
  • aywhen
  • aywhen
  • 2014年03月14日 16:54
  • 828

Bootstrap笔记1--准备工作

1.准备库 Bootstrap库下载:http://download.csdn.net/detail/erdouzhang/9775679 我把下面用到的库都统一放在lib目录下,便于引用。2.准...
  • erdouzhang
  • erdouzhang
  • 2017年03月08日 10:03
  • 204

[项目][准备1] Bootstrap体验

项目开发准备1
  • luxin_xyz
  • luxin_xyz
  • 2016年09月30日 16:57
  • 128

AngularJs+bootstrap搭载前台框架——准备工作

1.关于什么是AngularJs以及什么是bootstrap我就不多说了,简单说下,angularjs是一个比较强大前台MVC框架,bootstrap是Twitter推出的一个用于前端开发的开源工具包...
  • JThink_
  • JThink_
  • 2013年08月07日 21:51
  • 89175

BootStrap--入门准备

屏幕分辨率(PX):指在横纵向上的像素点数,单位是px,1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率,如1960*1080。(这里的1像素值得是物理设备的1个像素点)屏幕像素密度...
  • github_34514750
  • github_34514750
  • 2016年12月07日 09:31
  • 209

[项目][准备5] Bootstrap&jQuery插件体验

项目 准备5
  • luxin_xyz
  • luxin_xyz
  • 2016年10月02日 19:11
  • 411

Bootstrap 准备工作

Starter Template for Bootstrap ...
  • s445320
  • s445320
  • 2015年08月08日 18:56
  • 822
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:bootstrap 之准备开发
举报原因:
原因补充:

(最多只允许输入30个字)