首页 > 其他分享> 文章详细

Bootstrap（pink老师）

2021-10-02 12:01:23 阅读：169 来源： 互联网

标签：pink 布局 container 老师 Bootstrap 栅格 col 页面

一、Bootstrap前端开发框架

2.1 Bootstrap简介

Bootstrap自Twitter (推特) , 是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和JAVASCRIPT

的，它简洁灵活,使得Web开发更加快捷。

框架:顾名思义就是一架构,它有一套比较完整的网页功能解决方案 ,且控制权在框架本身,有预制样式库、组

件和插件。使用者要按照框架所规定的某种规范进行开发。

1.优点

标准化的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈,不断的更新迭代
让开发更简单,提高了开发的效率

2.版本

2.x.x :停止维护,兼容性好,代码不够简洁,功能不够完善。
3.x.x: 目前使用最多,稳定,，但是放弃了IE6-IE7。对lE8支持但是界面效果不好偏向用于开发响应式布局、移动设备优法的WEB项目。
4.x.x :最新版，目前还不是很流行

2.2 Bootstrap使用

在现阶段我们还没有接触JS相关课程,所以我们只考虑使用它的样式库。

控制权在框架本身,使用者要按照框架所规定的某种规范进行开发。
Bootstrap使用四步曲:

1.创建文件夹结构

2.创建html骨架结构

拷贝并粘贴下面给出的 HTML 代码，这就是一个最简单的 Bootstrap 页面了。

<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <!-- 要求当前网页使用IE浏览器的最高版本的内核来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 视口的设置：视口宽度和设备一致，默认的缩放比例和pc端一致，用户不能自行缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

</head>

<body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>

</html>

3.引入相关样式文件

 <!-- 一定不要忘记引入bootstrap -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

4.书写内容

直接拿Bootstrap预先定义好的样式来使用
修改Bootstrap原来的样式,注意权重问题
学好Bootstrap的关键在于知道它定义了哪些样式,以及这些样式能实现什么样的效果

2.3布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器, Bootstarp预先定义好了这个类,叫.container它提供了两个作此用处的类。

1.container类

响应式布局的容器固定宽度
- 大屏(>=1200px)宽度定为1170px
- 中屏(>=992px)宽度定为970px
- 小屏( >=768px)宽度定为750px
- 超小屏(100%)

2.container-fluid类

流式布局布局容器百分百宽度
占据全部视口（viewport）的容器
适合于单独做移动端开发

二、Bootstrap栅格系统

3.1栅格系统简介

栅格系统英文为"grid systems" ，,也有人翻译为“网格系统”, 它是指将页面布局划分为等宽的列,然后通
过列数的定义来模块化页面布局。

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口( viewport)尺时的增加,

系统会自动分为最多12列。
Bootstrap里面container宽度是固定的,但是不同屏幕下, container的宽度不同,我们再把container划分为12

等份

3.2栅格选项参数

栅格系统用于通过一系列的行( row )与列( column )的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。

行( row )必须放到container布局容器里面
我们实现列的平均划分需要给列添加类前缀
xs-extra small :超小; sm-small :小; ma-medium:中等; lg-large :大;
列( column )大于12,多余的“列( column)”所在的元素将被作为一个整体另起一行排列
每-列默认有左右15像素的padding

可以同时为一列指定多个设备的类名，以便划分不同份数，例如class="col-md-4 col-sm-6"

<div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
</div>

举例子：
每个盒子占四分之一

<div class="container">
        <div class="row">
            <div class="col-lg-3">1</div>
            <div class="col-lg-3">2</div>
            <div class="col-lg-3">3</div>
            <div class="col-lg-3">4</div>
        </div>
        <!-- 如果孩子的份数相加等于12，则孩子能占满整个的 container的宽度 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-2">4</div>
        </div>
        <!-- 如果孩子的份数相加小于12则会占不满整个container的宽度 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-1">4</div>
        </div>
        <!-- 如果孩子的份数相加大于12则会占不满整个container的宽度 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-3">4</div>
        </div>
    </div>

加上边框的样式代码：

[class^="col"] {
    border: 1px solid #ccc;
}

3.3列嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <!-- 我们列嵌套最好加1个row，这样可以取消父元素的padding值 -->
            <div class="row">
                <div class="col-md-6">a</div>
                <div class="col-md-6">b</div>
            </div>

        </div>
        <div class="col-md-4">2</div>
        <div class="col-md-4">3</div>
    </div>
</div>

3.4列偏移

使用.col-md-offset-\*类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距( margin )。

<div class="container">
        <div class="row">
            <div class="col-md-4">左侧</div>
            <!-- 偏移的份数就是12-两个盒子的份数 = 6 -->
            <div class="col-md-4 col-md-offset-4">右侧</div>
        </div>
        <!-- 中间盒子 -->
        <div class="row">
            <!-- 如果只有一个盒子，那么就偏移=（12-8）/2 -->
            <div class="col-md-8 col-md-offse-t-2">中间盒子</div>
        </div>
    </div>

3.5列排序

通过使用.col-md-push-*和.col-md pull*类就可以很容易的改变列( column )的顺序。

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-push-8">左侧</div>
        <div class="col-md-8  col-md-pull-4">右侧</div>
    </div>
</div>

3.6响应式布局

为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备
展示或隐藏页面内容。

与之相反的,是visible xs visible -sm visible -md visible-lg是显示某个页面内容
Bootstrap其他(按钮、表单、表格)请参考Bootstrap文档。

<div class="container">
    <div class="row">
        <div class="col-xs-3">
            <span class="visible-lg">我会显示</span>
        </div>
        <div class="col-xs-3">2</div>
        <div class="col-xs-3 hidden-md hidden-xs">magic</div>
        <div class="col-xs-3">4</div>
    </div>
</div>

标签：pink,布局,container,老师,Bootstrap,栅格,col,页面
来源： https://www.cnblogs.com/MyBlogForRecord/p/15361649.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9