bootstrap基础知识

1 hello bootstrap!

下载bootstrap的开发包并添加到项目中，引入需要的link，实现hello bootstrap! 该模块涉及包的导入和包的引用，是初学bootstrap的一个好的引导。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>hello bootstrap!</title>

    <link href="../css/bootstrap.min.css" rel="stylesheet">

<!--    引入框架包的方法：
            直接将下载的bootstrap包内的dist下的文件直接复制到项目目录下面即可
   -->

<!--    bootstrap框架的引入：
            1、写入viewport mete标签
            2、引入bootstrap.min.css文件
            3、引入jq后，引入bootstrap.min.js文件
    -->
</head>
<body>
<h1>hello bootstrap!</h1>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../js/bootstrap.min.js"></script>
</body>
</html>

2 栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
以下是一个简单的实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>栅格系统</title>

    <link href="../css/bootstrap.min.css" rel="stylesheet">

    <!--    栅格系统：
                描述：栅格系统是bootstrap创建的一个用于页面构建的html布局工具系统，
                    该系统通过提供的类名来将容器等分为12个结构
                    通过对容器的宽度进行指定来进行页面的快速搭建
                说明：
                    1、响应式布局（一套代码，能够在不同的页面中有不同的加载效果）
                    2、提供了很多预定义的类名，通过使用这些类名能够快速的获得css样式
                内容：
                    1、container：通过使用.container类名，来定义一个栅格系统
                    2、row：通过使用.row类名，来定义一个栅格中的行容器
                    3、col-[screenStyle]-[percent]：通过使用复合类名，来定义一个栅格行中的一个栅格的大小
                        a.screenStyle 设备类型（样式能够生效的设备类型）
                            col-xs-..: 超小型设备，宽度小于768px的设备
                            col-sm-..: 小型设备，宽度大于768px小于992px的设备
                            col-md-..: 中型设备，宽度大于992px小于1200px的设备
                            col-lg-..: 大型设备，宽度大于1200px
                        b.percent: 栅格在一行中占多少列（1-12）
                补充：
                    栅格container能够赋予页面元素一个默认水平居中的效果
                    其实就是通过设置了margin和padding属性
                建议：
                    1、如非必要，栅格请不要使用嵌套
                    2、栅格不是只能切割页面，栅格写在哪个元素里就对哪个元素进行切分
                        只不过通常栅格用来切割整个页面，用来页面的布局

    -->

    <style>
        .color1{background: #2d78f4}
        .color2{background: red}

    </style>
</head>

<body>

<div class="container">
    <div class="row">
        <div class="col-md-8 color1">
            <h1>左边的栅格</h1>
        </div>
        <div class="col-md-4 color2">
            <h1>右边的栅格</h1>
        </div>
    </div>
</div>




<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../js/bootstrap.min.js"></script>
</body>
</html>

3 全局css样式

了解bootstrap提供的css样式并尝试着多使用它们，可以直接引用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>全局css样式</title>

    <link href="../css/bootstrap.min.css" rel="stylesheet">


</head>
<body>
<h1>排版</h1>
<h1>hello bootstrap!</h1>
<h2>hello bootstrap!</h2>
<h3>hello bootstrap!</h3>

<hr>
<h1>副标题</h1>
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>

<hr>
<h1>文字对齐</h1>
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

<hr>
<h1>改变大小写</h1>
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

<hr>
<h1>缩略语</h1>
<abbr title="attribute">attr</abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

<hr>
<h1>代码</h1>
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../js/bootstrap.min.js"></script>
</body>
</html>

4 组件

无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>组件</title>

    <link href="../css/bootstrap.min.css" rel="stylesheet">


</head>
<body>
<h1>按钮</h1>
<button type="button" class="btn btn-default" aria-label="Left Align">
    <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

<h1>下拉菜单</h1>
<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

<h1>徽章</h1>
<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
    Messages <span class="badge">4</span>
</button>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../js/bootstrap.min.js"></script>
</body>
</html>

5 JavaScript插件

jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>JavaScript 插件</title>

    <link href="../css/bootstrap.min.css" rel="stylesheet">


</head>
<body>
<h1>模态框 </h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../js/bootstrap.min.js"></script>
</body>
</html>

6 总结

可以简化开发过程，且让页面更加美观。

水瓶座

发布了28 篇原创文章 · 获赞 5 · 访问量 2205

私信关注

前端框架之bootstrap入门

bootstrap使用入门

bootstrap基础知识

1 hello bootstrap!

2 栅格系统

3 全局css样式

4 组件

5 JavaScript插件

6 总结

猜你喜欢

前端框架之bootstrap入门

bootstrap使用入门

bootstrap基础知识

1 hello bootstrap!

2 栅格系统

3 全局css样式

4 组 件

5 JavaScript插件

6 总结

猜你喜欢

4 组件