玩转bootstrap学习笔记

程序员文章站 2022-05-05 18:32:01

...

开始时间：2020/1/13
结束时间：2020/1/14

（一）日常前戏

1、bootstrap官网：getbootstrap.com
官网给bootstrap的定义是：the world’s most popular front-end component library.

2、bootstrap中文网：bootcss.com，本课程只介绍bootstrap常用的那部分，剩余的部分相关文档可以在这个网站查询。

3、相关cdn网站：bootcdn.cn，解决下载源码缓慢的问题。

4、alpha版本不是稳定版。

（二）栅格系统

1、栅格系统专门用于分割页面。

2、栅格将母元素切割为12份。

3、

	<div class="col-md-3">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, eius. Nam quaerat vero ducimus velit, rerum quas assumenda alias voluptatem molestias consectetur odit obcaecati delectus, maiores, in maxime veritatis inventore?
    </div>
    <div class="col-md-3">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, eius. Nam quaerat vero ducimus velit, rerum quas assumenda alias voluptatem molestias consectetur odit obcaecati delectus, maiores, in maxime veritatis inventore?
    </div>
    <div class="col-md-3">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, eius. Nam quaerat vero ducimus velit, rerum quas assumenda alias voluptatem molestias consectetur odit obcaecati delectus, maiores, in maxime veritatis inventore?
    </div>
    <div class="col-md-3">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, eius. Nam quaerat vero ducimus velit, rerum quas assumenda alias voluptatem molestias consectetur odit obcaecati delectus, maiores, in maxime veritatis inventore?
    </div>

其中，col表示列，md与响应式布局有关，表示窗口大于中型尺寸时应用样式，3表示一个div占12列中的3列，以上4个div正好占满。
还可以设置窗口大于小型尺寸时应用样式：

	<div class="col-sm-3">
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, eius. Nam quaerat vero ducimus velit, rerum quas assumenda alias voluptatem molestias consectetur odit obcaecati delectus, maiores, in maxime veritatis inventore?
	<div>

还可以设置窗口大于超小尺寸时应用样式：

	<div class="col-xs-3">
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, eius. Nam quaerat vero ducimus velit, rerum quas assumenda alias voluptatem molestias consectetur odit obcaecati delectus, maiores, in maxime veritatis inventore?
	<div>

4、经过以上练习，对于一般的网页，可以立即用三个div将从左至右的布局写出来。比如博客系统，典型的布局就是两边窄，中间宽，那么可以从左至右切割为2、8、2三份。

	<div class="col-sm-2">
		<h3>主侧栏</h3>
	</div>
	<div class="col-sm-8">
		<h1>内容</h1>
	</div>
	<div class="col-sm-2">
		<h3>右侧栏</h3>
	</div>

分割页面后，由于sm的存在，页面是响应式的，窗口小于small规定的相关参数后自动取消样式，这适用于PC与移动端同时使用。

注意：
与之相对的，也有纵向分割的栅格类：row-sm-2等。

总结：
栅格主要实现以下两个功能：

分割页面
在分割的同时考虑响应式设计

（三）表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <form class="container container-small">
        <h1>注册</h1>
        <!-- 将姓与名放到一行中，若窗口小，仍为两行，体现响应式布局 -->
        <div class="form-inline">
            <div class="form-group has-error">
                <!-- control-label使得div的状态应用到label上 -->
                <label class="control-label">姓</label>
                <input type="text" class="form-control input-lg">
            </div>
            <div class="form-group has-success">
                <label class="control-label">名</label>
                <input type="text" class="form-control input-sm">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label">充值金额</label>
            <div class="input-group">
                <div class="input-group-addon">￥</div>
                <input type="text" class="form-control">
            </div>
        </div>
        <div class="form-group has-warning">
            <label class="control-label">地址</label>
            <select class="form-control">
                <option value="1">金台区</option>
                <option value="2">渭滨区</option>
                <option value="3">陈仓区</option>
            </select>
        </div>

        <!-- 将表单与栅格结合 -->
        <!-- 以下就是**的经典样式 -->
        <!-- 利用row将下面的表单与上面的对齐，因为row有负margin，在不希望栅格有两边的padding的情景下使用 -->
        <div class="row">
            <div class="col-sm-4">
                <input type="text" class="form-control" placeholder="XXXX">
            </div>
            <div class="col-sm-4">
                <input type="text" class="form-control" placeholder="XXXX">
            </div>
            <div class="col-sm-4">
                <input type="text" class="form-control" placeholder="XXXX">
            </div>
        </div>
    </form>
</body>
</html>

页面效果：
玩转bootstrap学习笔记

（四）按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Document</title>
</head>
<body>
    <div class="well">
        <!-- 用p取代div是因为p有一个默认的margin，不会像默认div那么挤 -->
        <p>
            <button class="btn btn-default">戳我</button>
            <button class="btn btn-primary">戳我</button>
            <button class="btn btn-danger">戳我</button>
            <button class="btn btn-warning">戳我</button>
            <button class="btn btn-info">戳我</button>
        </p>
        
        
        <p>
            <!-- a标签也可以表现为一个按钮 -->
            <a class="btn btn-danger" href="http://www.baidu.com">断网测试</a>

            <!-- input也可以表现为一个按钮 -->
            <input class="btn btn-default" type="submit" value="戳我">
            <!-- 以上的技巧使得网页给用户视角上的感觉更加统一 -->
        </p>
        

        <p>
            <!-- 关于大小的调整 -->
            <!-- large -->
            <button class="btn btn-primary btn-lg">戳我</button>
            <!-- default:btn-middle -->
            <button class="btn btn-primary">戳我</button>
            <!-- small -->
            <button class="btn btn-primary btn-sm">戳我</button>
            <!-- extra small -->
            <button class="btn btn-primary btn-xs">戳我</button>
        </p>

        <p>
            <!-- btn-block是一个块级元素，使得button占整个母元素的整宽 -->
            <button class="btn btn-primary btn-block">戳我</button>
        </p>

        <p>
            <button class="btn btn-default" disabled="disabled">戳不成</button>
            <button class="btn btn-default active">戳中了</button>
            <button class="btn btn-default">求戳</button>
        </p>

    </div>
</body>
</html>

页面效果：
玩转bootstrap学习笔记

（五）按钮组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Document</title>
</head>
<body>
    <div class="well">
        <div class="btn-toolbar">
            <div class="btn-group btn-group-lg">
                <button class="btn btn-default">戳我</button>
                <button class="btn btn-default">戳我</button>
                <button class="btn btn-default">戳我</button>
            </div>
    
            <div class="btn-group">
                <button class="btn btn-default">戳我</button>
                <button class="btn btn-default">戳我</button>
                <button class="btn btn-default">戳我</button>
            </div>

            <div class="btn-group btn-group-sm">
                <button class="btn btn-default">戳我</button>
                <button class="btn btn-default">戳我</button>
                <button class="btn btn-default">戳我</button>
            </div>

            <div class="btn-group btn-group-xs">
                <button class="btn btn-default">戳我</button>
                <button class="btn btn-default">戳我</button>
                <button class="btn btn-default">戳我</button>
            </div>
        </div>
        <p>
            <!-- 纵向排列 -->
            <div class="btn-group-vertical">
                <button class="btn btn-default">戳我</button>
                <button class="btn btn-default">戳我</button>
                <button class="btn btn-default">戳我</button>
            </div>
        </p>
    </div>
</body>
</html>

页面效果如下：
玩转bootstrap学习笔记

（六）导航

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">
    <title>Document</title>
</head>
<body>
    <!-- nav-justified使几个导航按钮平均分布 -->
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#">登录</a></li>
        <li><a href="#">注册</a></li>
        <li><a href="#">忘记密码</a></li>
    </ul>
    <div>
        <h1>登录</h1>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi alias perspiciatis tempora debitis eum dignissimos. Nemo vel similique adipisci natus iure temporibus repellat? Beatae labore hic non voluptatum, ipsa placeat!
    </div>
    <br>
    <br>

    <ul class="nav nav-pills">
        <li class="active"><a href="#">登录</a></li>
        <li><a href="#">注册</a></li>
        <li><a href="#">忘记密码</a></li>
    </ul>
    <div>
        <h1>登录</h1>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi alias perspiciatis tempora debitis eum dignissimos. Nemo vel similique adipisci natus iure temporibus repellat? Beatae labore hic non voluptatum, ipsa placeat!
    </div>
    <br>
    <br>
    <!-- 添加row抵消col的padding，使得上下对齐 -->
    <div class="row">
        <!-- 纵向排列，可以用作侧栏。为限制不让其整宽，将其置于4/12的栅格中 -->
        <div class="col-xs-4">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">忘记密码</a></li>
            </ul>
        </div>
        <!-- 内容部分占8/12，与导航互补 -->
        <div class="col-xs-8">
            <h1>登录</h1>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi alias perspiciatis tempora debitis eum dignissimos. Nemo vel similique adipisci natus iure temporibus repellat? Beatae labore hic non voluptatum, ipsa placeat!
        </div>
    </div>
</body>
</html>

main.css:

body{
    max-width:400px;
    /* 上下为0，左右auto，可以使其居中 */
    margin:20px auto;
}

页面效果：
玩转bootstrap学习笔记

（七）导航栏

nav用于局部导航，nav-bar用于整站导航。

玩转bootstrap学习笔记

（一）日常前戏

（二）栅格系统

（三）表单

（四）按钮

（五）按钮组

（六）导航

（七）导航栏

opencv进阶学习笔记10：图像金字塔和图像梯度

Python学习笔记（10）-Python进阶10-字典与集合

Javascript学习笔记二之变量_基础知识

php学习笔记面向对象中[接口]与[多态性]的应用

php SQLite学习笔记与常见问题分析第1/2页_php技巧

ThreadLocal和InheritableThreadLocal学习笔记

框架修炼之ssm-Mybatis学习笔记一

荐 java生成图片，自己踩过的那些坑。java.awt的学习笔记！！！

PHP中的cURL请求及示例学习笔记_PHP教程

PHP入门学习笔记之一_PHP

玩转bootstrap学习笔记

（一）日常前戏

（二）栅格系统

（三）表单

（四）按钮

（五）按钮组

（六）导航

（七）导航栏

opencv进阶学习笔记10：图像金字塔和图像梯度

Python学习笔记（10）-Python进阶10-字典与集合

Javascript学习笔记二 之 变量_基础知识

php学习笔记 面向对象中[接口]与[多态性]的应用

php SQLite学习笔记与常见问题分析第1/2页_php技巧

ThreadLocal和InheritableThreadLocal学习笔记

框架修炼之ssm-Mybatis学习笔记一

荐 java生成图片，自己踩过的那些坑。java.awt的学习笔记！！！

PHP中的cURL请求及示例学习笔记_PHP教程

PHP入门学习笔记之一_PHP

Javascript学习笔记二之变量_基础知识

php学习笔记面向对象中[接口]与[多态性]的应用