bootstrap的一些属性问题

最新推荐文章于 2022-09-07 08:53:11 发布

原创最新推荐文章于 2022-09-07 08:53:11 发布 · 7.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

op写前端专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了在前端开发中如何调整输入框的大小（input-mini, input-small, input-medium, input-large, input-xlarge, input-xxlarge）以及如何为body和textarea元素设置背景图片，并通过实例展示了如何在导航栏中使用不同的颜色方案，如navbar-inverse来实现相反的颜色效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有些属性记不住啊，记录下吧

input的size问题

class=>"input-mini"
class=>"input-small"
class=>"input-medium"
class=>"input-large"
class=>"input-xlarge"
class=>"input-xxlarge"

body修改背景图片

textarea修改背景图片

标题栏设置背景颜色

        body {
            padding-bottom: 20px;
            background: #fafafa url(/static/bootstrap/img/retina_wood.png);
            color: #444;
            padding: 60px 0;
        }
        .navbar-inner {
            background-color: #FFAAAA; /* background color will be black for all browsers */
            background-image: none;
            background-repeat: no-repeat;
            filter: none;
        }
        .testarea {
            background: #fafafa url(/static/bootstrap/img/retina_wood.png);
            width:100%;
        }

navbar-inverse设置相反的颜色，bootstrap默认的是白色，然后用了这个选项可以变成黑色，

如果想使用别的颜色，则按照上面的代码写好，然后html按照下面的写，也就是重写navbar-inner

<body >
        <div class="container" >
            <div class="navbar">
                <div class="navbar-inner">
                    <a class="brand" href="#">Web terminal</a>
                    <ul class="nav">
                        <li class="active"><a href="#">Run command</a></li>
                        <li><a href="#">Push file</a></li>
                        <li><a href="#">Load config file</a></li>
                    </ul>
                </div>
            </div>
        </div>