bootstrap学习

写一个基本功能的购物网站,一个挑战杯的项目,首先想写的是后台的功能,然后是电脑版的前台页面。之后是手机版的前台页面(微信微网站)

使用的技术是django + bootstrap

要学习的太多了  

django的基本功能还可以吧,主要的是逻辑的设计还有页面的设计。

业务逻辑慢慢的去想吧,前台设计现在就开始学习。

html + css + js + bootstrap的特色用法

 

 

http://www.w3school.com.cn/css/pr_padding-top.asp

 

 

-----------------

.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询阈值范围内都为container设置了width,用以匹配栅格系统。

注意,由于设置了padding 和 固定宽度,.container不能嵌套。

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

为了确保适当的绘制和触屏缩放,需要在<head>之中添加viewport元数据标签

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

 

在移动设备浏览器上,通过为viewport meta标签添加user-scalable=no可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。注意,这种方式我们并不推荐所有网站使用,还是要看你自己的情况而定!

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

 

 

通过文本对齐class,可以简单方便的将文字重新对齐。

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

 

强调class

这些class通过颜色来表示强调。也可以应用于链接,当鼠标盘旋于链接上时,其颜色会变深,就像默认的链接样式。

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

 

 

鼠标悬停

利用.table-hover可以让<tbody>中的每一行响应鼠标悬停状态。

<table class="table table-hover">
  ...
</table>

http://v3.bootcss.com/css/#type

 

 

 

posted @ 2013-12-04 18:50  virusdefender  阅读(341)  评论(0编辑  收藏  举报