用 Bootstrap 帮别人做的一个站，大家来批判下？

Bootstrap

排版

前端

83 条回复 • 2014-09-14 11:46:47 +08:00

1

GitFree

2014-06-26 10:23:54 +08:00

1

这还算新手？掩面飘过

2

mikj

2014-06-26 10:25:06 +08:00

1

很不错求 lz联系方式

3

ddzz

2014-06-26 10:25:57 +08:00

1

后生可畏

4

chenggiant

OP

2014-06-26 10:26:50 +08:00

@GitFree
@mikj
看源代码就可以看出是新手了...

5

83f420984

2014-06-26 10:27:09 +08:00

1

导航栏没有做成响应式

6

Phariel

2014-06-26 10:28:56 +08:00

1

不错了，这还新手。。。。

7

westup

2014-06-26 10:29:46 +08:00

4

使用成熟框架的好处就是，粗看几乎完美了

8

davepkxxx

2014-06-26 10:30:45 +08:00

1

配色不错

9

9hills

2014-06-26 10:32:44 +08:00

1

掩面路过，lz这个配色很好

10

Keinez

2014-06-26 10:34:09 +08:00

1

- 看上去有两个footer，没有意义。重复内容过多。
- 为什么不用fullscreen而用这种小气的版式？
- 重选一套图标吧，fontawesome很丑。
- 最严重的问题：第一印象我不知道这个网站是干啥的

11

jimmy2010

2014-06-26 10:38:27 +08:00

1

@ 2013 Picture Perfect. All rights reserved

copyright的图标貌似用错了

12

chenggiant

OP

2014-06-26 10:38:32 +08:00

@83f420984 对的...导航栏还没弄太清楚，只是暴力调整的在iPhone上能看而已。找机会再学习下了。

13

airbob

2014-06-26 10:39:27 +08:00

1

不错，顶一个。

14

chenggiant

OP

2014-06-26 10:39:51 +08:00

@jimmy2010 谢指出。看的好仔细呀。时间还应该改成2014呀...

15

chenggiant

OP

2014-06-26 10:40:40 +08:00

@westup 『粗』字用的很对呀，哈哈。

16

Seita

2014-06-26 10:42:20 +08:00 via Android

1

批判。。我是来纠正语文错误的。

17

chenggiant

OP

2014-06-26 10:46:21 +08:00

@Keinez
- 也想用fullscreen来着，但是网站拥有者不喜欢...用fullscreen的话，网上有好多例子可以学习，但是我自己决定不了呀。
- Font Awesome以外有推荐的么？
- 首页介绍确实有点少...看来应该加点文字在图片上。

18

tremblingblue

2014-06-26 10:49:20 +08:00

2

掩面而过，为嘛人家的网站看起来总是那么高大上的呢

19

yangff

2014-06-26 10:52:58 +08:00

1

Home
About Us
Services
Work
Crew Hires
Contact
这里的圆角有点奇怪。。

20

xiaoai

2014-06-26 10:53:56 +08:00

1

好挤丫

21

mikj

2014-06-26 10:54:14 +08:00

1

@chenggiant 求联系求交往

22

chenggiant

OP

2014-06-26 10:55:00 +08:00

@mikj 哦？什么联系方式？

23

yangg

2014-06-26 10:56:02 +08:00

1

中间那个 We specialize in 下面的几个东东字没居中哦

24

no13bus

2014-06-26 10:56:09 +08:00

1

@chenggiant 同求，也在学习bt，但是就是不知道怎么改成像楼主这样高大上的感觉

25

chenggiant

OP

2014-06-26 10:56:51 +08:00

@yangff 嗯，貌似Bootstrap好多地方都是默认圆角呀。有点地方强行去掉了，有的地方忘了...晚上找时间修改下。

26

beingbin

2014-06-26 10:59:46 +08:00

2

整体看上去色调蛮舒服的，就是排版布局还要优化一下，比如文字的对其方式
1、图标与文字水平居中
2、中间这一块排的不好看，这个联系方式不应该居中对齐，且没有重点，一个email单独标红是闹哪样
3、下方这一块缺乏紧密性，松松散散没有主次，标题与下方内容应该区分开来，比如字体的大小、粗细、颜色等

可以参考下下面这个简历，人家的排版，没有多少图片、颜色，但是字体、排版很不错，用的很到位

27

refear99

2014-06-26 11:02:43 +08:00

1

这还算新手？不管代码写的怎么样，页面设计的很好哦~

28

chenggiant

OP

2014-06-26 11:06:12 +08:00

1

@mikj
@no13bus
QQ：121320087 邮箱：chengchibt#gmail 够么。

29

no13bus

2014-06-26 11:08:44 +08:00

1

@chenggiant 够了。找个一起学习的朋友挺好。

30

chenggiant

OP

2014-06-26 11:13:07 +08:00

@beingbin
谢谢你的建议，感谢为什么不能发多次！
继续看『Non-designer's Design Book』去...

31

littlewey

2014-06-26 11:16:31 +08:00

Singapore~

32

lu18887

2014-06-26 11:31:13 +08:00

1

域名敢再长点吗！？

33

puyo

2014-06-26 11:31:56 +08:00

1

@beingbin 简历很不错，能递个链接看一看吗？

34

chenggiant

OP

2014-06-26 11:33:39 +08:00

@lu18887 哈，其实可以的，比如 http://pictureperfectproductions.com.sg/

35

mikj

2014-06-26 11:36:28 +08:00

1

@chenggiant QQ已加

36

Tonni

2014-06-26 11:52:28 +08:00

1

骚年，你需要一个产品经理给你指点江山

37

est

2014-06-26 11:54:08 +08:00

1

那么多人都掩面，看来我必须挖地洞逃走了。

38

windirt

2014-06-26 12:06:22 +08:00

1

现在看到不支持retina的网站就不能忍啊 LZ把所有图资都弄个 [email protected] 版本放在同一个目录。然后植入retina.js吧。毕竟你这是面向设计的网站。

39

kukat

2014-06-26 12:21:47 +08:00

1

@chenggiant 混坡县的？

40

WildCat

2014-06-26 12:24:42 +08:00

1

70000电脑的壕

41

flfruit

2014-06-26 12:27:05 +08:00

1

很好看诶，楼主加你了。

42

RyuZheng

2014-06-26 12:30:11 +08:00 via Android

1

支持楼主一个

43

hahastudio

2014-06-26 12:32:00 +08:00

2

现在是流行菊苣装新手么= =

44

chenggiant

OP

2014-06-26 12:32:15 +08:00

@WildCat 那是做实验用的，和我没半点关系呀...还在用着09年的13寸MBP了...

45

xiaowangge

2014-06-26 12:34:36 +08:00

1

FireFox 30.0下看得的效果：

46

chenggiant

OP

2014-06-26 12:39:08 +08:00

@xiaowangge OMG...浏览器兼容的这么差么。之前用Firefox看还好来着...

47

chenggiant

OP

2014-06-26 12:39:30 +08:00

@kukat 嗯。

48

superbear

2014-06-26 12:42:30 +08:00

1

@chenggiant 很不错，新手太谦虚了

49

asca

2014-06-26 12:44:42 +08:00

1

@chenggiant Firefox 31 beta 表示没有任何问题，30不至于这么差吧。

50

precisi0nux

2014-06-26 13:37:24 +08:00

1

@xiaowangge
@chenggiant
我在Firefox 30 for Mac下排版很正常，效果很不错。但总感觉logo很山寨= =#（跑题了）。

51

shuson

2014-06-26 13:37:55 +08:00

1

@chenggiant
@kukat 同混坡县么

52

GPU

2014-06-26 13:59:17 +08:00

1

chrome 35 感觉很厉害。各种特效好喜欢。楼主能带我做一个吗？

53

konakona

2014-06-26 14:02:08 +08:00

1

如果沒有參考和山寨任何網站的話，這個設計可以說看得出個人思維。
很多細節（間距）有稍微調整過，但調得不是很到位，這說明還有提升得空間。

我自己弄的公司網站：
www------kingweixin-----.com

一开始也很丑，都是bootstrap。后面慢慢跟磨皮一样，大框架出来了，调字体、细节、间距、边框等等……
当然首页就别看了，我现在在想怎么改掉。

54

lijun20020229

2014-06-26 14:35:48 +08:00

1

比我弄的好看多了。。

55

MarioLuisGarcia

2014-06-26 14:37:21 +08:00

2

"Our clients are all different
Some big some small, but all trust us with their brand"

Singapinglish?

56

chenggiant

OP

2014-06-26 15:22:42 +08:00

@shuson
@kukat
V2上感觉坡县的同学很多呀，应该搞个坡县V2群哦...

57

chenggiant

OP

2014-06-26 15:25:46 +08:00

@MarioLuisGarcia 像Singlish？这tagline也不是我想的哦...

58

chenggiant

OP

2014-06-26 15:27:34 +08:00

@konakona 嗯，现在已经收集到了好多要修改的细节呀。得慢慢的磨皮。

59

chenggiant

OP

2014-06-26 15:29:40 +08:00

@precisi0nux 是的，有人指出来像Beats的logo倒了过来...

60

kukat

2014-06-26 15:41:20 +08:00

@chenggiant
@shuson

坡县码农qq群倒是加了两个，都没人发言。。。

在想 @Livid 能不能开个新加坡节点，方便交（gao）流（ji）

61

shuson

2014-06-26 15:52:46 +08:00

@kukat
@chenggiant
看这里http://www.v2ex.com/go/singapore

62

Livid

MOD

2014-06-26 15:57:02 +08:00

@kukat 嗯，必须有的。

/go/sg 和 /go/singapore 都可以到达。

63

Delbert

2014-06-26 16:06:22 +08:00

不对齐，不能忍……

64

jarnanchen

2014-06-26 16:17:37 +08:00

Chrome导航条有问题

65

jaylong

2014-06-26 16:51:53 +08:00

66

lvwzhen

2014-06-26 17:00:05 +08:00

@xiaowangge 和浏览器没关系，是你 CSS 没正确加载。

67

lvwzhen

2014-06-26 17:02:57 +08:00

速度有点慢，建议开启 gzip

68

qwe542398

2014-06-26 17:41:21 +08:00

@chenggiant logo基本是侵权。。
然后加载不是一般的慢。。将近一分钟都还没加载完。。差评。。
排版方式有待改进。。尾部看久了会有种参差不齐的不舒服感
不太能理解
Get social with us
Find us
这两个的排版。。

69

MarioLuisGarcia

2014-06-26 18:10:39 +08:00

1

@chenggiant 那就是Singlish无疑了

70

Tankpt

2014-06-26 19:03:36 +08:00

好厉害。。。

71

ffffwh

2014-06-26 20:54:38 +08:00

我觉得Helvetica字距太小，Arial更是灾难..

72

no13bus

2014-06-26 21:06:42 +08:00

@chenggiant 已加。

73

WindSays

2014-06-26 21:17:11 +08:00

@konakona 那个图片悬停放大效果是特意弄成宽度也同时变大的么？

74

konakona

2014-06-27 02:06:15 +08:00

@WindSays 鼠标放上去图片变大只是动画效果，没有编写js控制。
图片放大了肯定会宽度和高度放大啊！！！！！！！！！！！

但如果不希望超出的话，上层div display none把

75

jalen

2014-06-27 09:10:30 +08:00

领导也让你这么花时间慢慢弄出来啊，好领导啊。。

76

hslx111

2014-06-27 10:12:02 +08:00

既然是搞图像的，在Retina屏下很多logo都是看着模糊不好吧。。。

77

timothyye

2014-06-27 13:07:47 +08:00

已经很不错了

78

bibizhang

2014-06-28 15:02:05 +08:00

logo还是更像pinterest

79

zomfg

2014-06-30 10:04:28 +08:00

我觉得做的很好，希望能认识卤煮，帮我做个类似的网站。。。

80

nolanlee

2014-07-01 16:37:24 +08:00

nav-pills把logo遮住了，导致logo link右半部分无法点击，建议去掉nav-pills相对定位改用右浮动。不过屏幕变窄会导致nav-pills换行，需要进一步处理。

81

julio867

2014-07-02 09:18:47 +08:00

感觉还可以，兼容性问题没有测试，本身BS就对IE8及以下不兼容了~~

82

zsz

2014-07-04 14:39:03 +08:00

从程序员角度看，布局简洁，式样可以自适应，有内容区域的明确的划分。

从设计角度来说，觉得还有些需要调整的地方

1. 布局，有的是右对齐，有的是中间对齐，感觉有些混乱。
2. 字体，每个区域标题的字体不够突出，还有些内容应该选择较小的字体，在引导用户视线方面作用不够。
3. 颜色，什么地方应该是红色，什么地方应该是灰色，第一眼看上去没有规律，会给用户造成疑惑。

从站内 SEO 角度看，在字体的选择，内容的设置上，也有部分需要调整。

83

Zhang

2014-09-14 11:46:47 +08:00

我也用bootstrap撸一个企业官网好了。