bootstrap学习使用——快速入门

本文介绍如何使用Bootstrap框架简化网页设计过程。重点讲解栅格系统、常用样式、表格、表单及按钮等组件的使用方法。

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

前言:
    最近在学习了bootstrap后,立马就使用它重新做了某个项目的页面,不要多想,怎么才学bootstrap!我只是刚参加工作的新手,以前比较喜欢写原生的CSS样式以及JS方法,页面效果的实现,一般一个项目的页面做完需要好几天的时间,改了又改!再加上一些JS效果,功能方法部分也得一周的时间,在使用了boobstrap之后,重新做了页面,只花了两天!好吧,开始我的学习笔记吧。

1. 栅格系统

使用外部div 添加类 container ,在内进行页面的划分,行 .row ,列 col-md-*,页面分成12份,例如:

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <h5>一行四列</h5>
        </div>
        <div class="col-md-4">
            <h5>一行四列</h5>
        </div>
        <div class="col-md-4">
            <h5>一行四列</h5>
        </div>
    </div>
</div>

当然,我们也可以在列中再划分行,或者列。也就是进行细分,非常方便。


2.部分样式

描述
.text-left文本居左
.text-right居右
.text-center居中
.text-lowercase文本小写
.text-uppercase文本大写
.text-capitalize单词首字母大写
.list-unstyled去除默认样式
.text-inline列表项处于一行

3.表格

表单元素

<table>
    <thead>
        <tr>
            <th><th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>
描述
.table表格横向分割线
.table-striped添加斑马条纹线
.table-bordered添加表格边框
.table-hover鼠标悬浮样式
.active添加鼠标悬浮样式
.success绿色样式
.info绿色样式
.warning黄色警示样式
.danger红色危险样式

类 .active .success .info .danger 可应用在提示信息的文本上,还有一个.primary,用做一些按钮组的不同样式


4.表单

<form role="form">
    <div class="form-group">
        <label class="col-md-4 control-label"></label>
        <div class="col-md-8">
            <input type="text" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-4 control-label"></label>
        <div class="col-md-8">
            <label>
                <input type="checkbox" class="">选购
            </label>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-4 control-label"></label>
        <div class="col-md-8">
            <select class="form-control">
                <option value="0"></option>
            </select>
        </div>
    </div>
</form>
描述
.form-group表单组,获取最佳间距
.form-control文本框元素的样式类
.control-labellabel标签样式
.form-inline所有元素处于同一行,(就不需要划分列了)
.form-horizontion水平表单,(也就是类form-group 中的元素处于同一行)

说明:.form-control样式使得文本框元素占据一行的剩余空间,所以在单选,复选框时,不要加.form-control ,不然回事选框的文字处于第二行。
表单的信息提示样式,.has-success(绿色文字,边框),.has-error(红色样式),.has-warning(黄色样式)


5.按钮

描述
.btn按钮基本样式
.btn-default按钮的默认样式
.btn-success绿色样式
.btn-warning黄色样式
.btn-danger红色样式
.btn-block设置父元素的100%,拉宽元素
.active激活样式
.disabled禁止点击样式

6.其他的样式

图片的样式设置:

  • .img-rounded 获得圆角图片
  • .img-circle 获得圆形图片
  • .img-responsive 使得图片响应式,随着父类大小改变

其他页面设计样式:

  • .clearfix 清楚浮动
  • .pull-left 元素居左
  • .pull-right 局右
  • .center-block 元素居中
  • .show .hide 元素显示,隐藏

好了,这些都是基本的页面结构设计的样式,还需要布局组件,后期在写,更加详细的内容访问菜鸟教程

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

heroboyluck

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值