bootstrap的使用。

本文介绍如何使用Bootstrap CSS框架创建美观的Web前端页面。包括框架下载、引入项目及基本使用方法,并推荐了一个在线图形工具以简化使用过程。

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

我们都知道bookstrap是一款十分好用切应用十分广泛的css开发框架,在国际上也很出名,使用它我们就可以很轻松的写出一些美观web前端页面,这里我们来看看他是怎样来使用,首先我们要,下载这个框架。到http://www.bootcss.com/就可以对其文档进行下载。

下载完成后将下载的包导入我们要用的项目中去,比如像下图这样


另外我们要注意的是还有一个jQuery文件我们我要下载下来放在js文件夹里,jQuery是JavaScript基础上的一个框架,这里就先使用就可以了。


将这个网址上的内容另存为文件放在上面js文件下就可以了。

下面我们我们简单试用一下。


使用时在你的HTML文件上添加这些语句,表示使用,你也可以根据需要来调整href和src的内容


我们来看看它里面的几行代码来了解以下他的使用

<div class="container">
    <div class="row clearfix">
        <div class="col-md-2 column">
            <ul class="nav nav-tabs nav-stacked">
                <li class="active">
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">简介</a>
                </li>
                <li class="disabled">
                    <a href="#">信息</a>
                </li>
                <li class="dropdown pull-right">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">下拉<strong class="caret"></strong></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">操作</a>
                        </li>
                        <li>
                            <a href="#">设置栏目</a>
                        </li>
                        <li>
                            <a href="#">更多设置</a>
                        </li>
                        <li class="divider">
                        </li>
                        <li>
                            <a href="#">分割线</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
虽然这样很方便,但在实际的开发中,我们也可以采用bootstrap的图形工具来更方便的使用bootstrap工具:比如http://www.runoob.com//try/bootstrap/layoutit/? 这个图形界面让我们更方便的使用它。这里就不详细说明了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值