V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ujmxyd
V2EX  ›  前端开发

新手应该直接拿 Bootstrap 来套吗?

  •  
  •   ujmxyd · 2016-02-09 20:43:23 +08:00 · 4646 次点击
    这是一个创建于 3208 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在给自己的网站写样式。之前没接触过 CSS ,看了看,开始动手写。结果到导航栏就卡住了。
    根本不知怎么配色,便从 Bootstrap 的默认主题里选了一些。但然后,又开始纠结诸如:“这个组织名称和用户登录状态的文字要不要放进<nav>?”“我想让那部分文字在右侧,用float: right是一般做法吗?(见 V2EX 用的是一个<table>)”之类的问题。(那本书中没有讲display: flex,看上去很好,但是我担心有人用微信打开它,会有问题吧。)
    并且,见许多示例都直接写width: ?px。不是要响应式吗?如果是如max-width: 750px这样的我还能理解,毕竟见过一行字占满整个屏幕宽度的网页。但直接指定宽度真的不会出问题?如果rem大了,或者 viewport 奇怪一点,不就会……
    这是现在的导航栏。还没考虑在移动设备上的效果

    <header>
        <span class="brand">Brand</span>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li class="active"><a href="/about/">About</a></li>
            </ul>
        </nav>
        <div class="text"><a href="/login/">Login</a></div>
    </header>
    
    .brand {
        font-size: 0.75em;
        text-align: left;
    }
    
    nav{
        display: inline-block;
    }
    
    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    nav li {
        display: inline-block;
        padding: 0.5em;
    }
    
    nav li.active {
        background-color: white;
    }
    
    nav a {
        font-size: 150%;
        color: #777;
        text-decoration: none;
    }
    
    header .text {
        float: right;
        padding: 0.5em;
    }
    

    我想先写好大概的样式,然后再去调整不同设备上的效果。然而,在登录页,我想让登陆按钮与上面的文本框右对齐,但是不是只能把<form>放进一个指定了width<div>,然后再text-align: right
    有点想直接拿 Bootstrap 套上。但看着文档里那一堆嵌套的divclass,便有些退却了。想问问各位应该怎样开始。

    13 条回复    2016-02-11 00:30:00 +08:00
    loading
        1
    loading  
       2016-02-09 20:50:19 +08:00 via Android   ❤️ 1
    如果对前端有兴趣,建议自己的站点自己写 css 甚至是抄一部分,而不是用 bootstrap 。


    工作上的就随意~
    jswh
        2
    jswh  
       2016-02-09 20:59:32 +08:00
    同意 1 楼。如果是练习,不要,哪怕是抄(记得手打不要复制)。
    plqws
        3
    plqws  
       2016-02-09 21:20:32 +08:00   ❤️ 1
    如果不熟悉现代前端又不打算花费太多时间在前端学习上的话, bootstrap 是最佳选择。否则就是长路漫漫了…
    XianZaiZhuCe
        4
    XianZaiZhuCe  
       2016-02-09 21:26:20 +08:00 via iPhone
    楼上正解。
    ujmxyd
        5
    ujmxyd  
    OP
       2016-02-09 21:35:11 +08:00
    谢谢各位了
    其实我的重点是那些奇怪的问题来着的
    gzelvis
        6
    gzelvis  
       2016-02-09 22:11:35 +08:00 via iPhone   ❤️ 1
    直接用 bootstrap ,然后样式等等参考 google design 规范
    master
        7
    master  
       2016-02-09 22:27:59 +08:00   ❤️ 1
    不管用什么 都不要成为框架的奴隶 而是要去了解其工作的原理 设计的思路
    当你知道框架本身是怎么工作之后 你用框架还是自己造框架都已经无所谓了
    Andy1999
        8
    Andy1999  
       2016-02-09 22:36:29 +08:00 via iPhone   ❤️ 3
    看到好看的 Save as /wget -m 多学学就写得好看了
    一直用 bs 就会跟某知名签到程序作者一样,其他的都写不来 产生依赖性
    orFish
        9
    orFish  
       2016-02-09 23:08:58 +08:00   ❤️ 1
    每计划深入前端就用 bs 。
    Biwood
        10
    Biwood  
       2016-02-10 10:10:21 +08:00 via Android
    一直觉得 bootstrap 是给那些不会写前端的后端程序员用的
    iyangyuan
        11
    iyangyuan  
       2016-02-10 10:40:20 +08:00 via iPhone   ❤️ 1
    慢慢来吧,哪能一口吃个胖子,先用 bs 套,慢慢学习其中的设计思想,主要是布局,等用的多了,再去总结 css 基础语法,接下来你就会豁然开朗
    0x1406F40
        12
    0x1406F40  
       2016-02-10 12:55:33 +08:00
    bootstrap 不就是用来套的嚒
    klausgao
        13
    klausgao  
       2016-02-11 00:30:00 +08:00 via iPhone   ❤️ 1
    说实话,很多公司的设计都不是很会 web 的,所以如果你想要符合大众审美的页面,还是套一下流行的前端框架吧,不是怎么折腾都会很难看。
    我的关注点是好看不好看,而不是练练手写写代码。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4903 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 09:41 · PVG 17:41 · LAX 01:41 · JFK 04:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.