四天搞定bootstrap---第二天

最新推荐文章于 2022-09-27 22:32:50 发布
最新推荐文章于 2022-09-27 22:32:50 发布
阅读量286 收藏 1
点赞数
分类专栏： bootstrap 文章标签： bootstrap bootstrap栅格系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32054169/article/details/83302643
版权

1.Boostrap第二部分：全局CSS样式——辅助类

  .pull-left

  .pull-right   

  .caret

  .close

  .center-block

2.Boostrap第二部分：全局CSS样式——排版&代码

3.Boostrap第二部分：全局CSS样式——表格

  .table                                                   

  .table-bordered         带边框的表格

  .table-striped            隔行变色的表格

  .table-hover              鼠标悬停变色的表格

  .table-responsive       响应式表格，用于TABEL父元素DIV

Bootlint：官方提供的一个用于检查HTML/CSS使用方面错误的工具。

  练习：如何为tr和td修改背景颜色 —— 自己查看手册

4.Boostrap第二部分：全局CSS样式——栅格布局系统——重点

  页面内容布局的三种方式：

  (1)TABLE布局

       好处：简单容易控制

       问题：语义错误，渲染效率低

  (2)DIV+CSS布局

       好处：语义正确，渲染效率高

       问题：不容易控制

  (3)Bootstrap栅格布局系统

       好处：语义正确，渲染效率高，简单容易控制，实现了响应式

       不足：没有！

栅格布局系统的使用方法：

(1)栅格系统的父元素必须是：

       div.container   - 定宽容器 

              LG:1170px MD:970px SM: 750px XS:100%

       div.container-fluid - 变宽容器

              width:100%

(2)在容器中声明“行”

       div.container > div.row

(3)在“行”中声明“列”

       div.container > div.row > div.col-*-*

(4)列根据不同的屏幕尺寸分为四组：

       .col-lg-*

       .col-md-*

       .col-sm-*

       .col-xs-*

(5)一行均分为12等份，每个列必须指定自己的占比：

       .col-lg-1

       .col-lg-2

       .col-lg-3

       .col-lg-...

       .col-lg-12

(6)列可以向后“偏移”指定的宽度

       .col-lg-offset-1

       .col-lg-offset-2

       .col-lg-offset-....

       .col-lg-offset-12

      

(7)不同屏幕宽度下的列宽度占比适用于指定屏幕以及更大屏幕

       .col-xs-*         适用于xs/sm/md/lg屏幕

       .col-sm-*        适用于sm/md/lg屏幕

       .col-md-*       适用于md/lg屏幕

       .col-lg-*         适用于lg屏幕

(8)一个列可以指定不同屏幕下的不同宽度占比

       <div class="col-xs-12  col-sm-9  col-md-6">

       <div class="col-xs-12  col-md-6">

(9)可以指定列在特定的屏幕下实现隐藏

       .hidden-lg

       .hidden-md

       .hidden-sm

       .hidden-xs

       .hidden

       注意：隐藏只对指定屏幕有效！

(10)栅格系统可以嵌套使用

       <div class="row">

              <div class="col-xs-1">

                     <div class="row">

                            <div class="col-xs-6"></div>

                     </div>

              </div>

       </div>

(11)列的排序问题——待续

 

午间练习：使用栅格系统实现如下页面布局：         

              <input class="form-control">

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link href="./css/bootstrap.css" rel="stylesheet">
  <script src="./js/html5shiv.min.js"></script>
  <script src="./js/respond.min.js"></script>
</head>
<body>
  <div class="container">
    <!--标题栏-->
    <div class="row">
      <div class="col-md-12">
        <h1>Bootstrap <i>CSS </i> <small>type</small></h1>
      </div>
    </div>
    <!--搜索框-->
    <div class="row">
      <div class="col-md-3 col-md-offset-9">
        <input class="form-control" type="text">
      </div>
    </div>
    <!--主体内容-->
    <div class="row">
      <div class="col-md-3">
        <ul class="list-unstyled">
          <li><a href="">startup</a></li>
          <li><a href="">globalcss</a></li>
          <li><a href="">component</a></li>
          <li><a href="">js plugin</a></li>
          <li><a href="">customize</a></li>
        </ul>
      </div>
      <div class="col-md-6">
        <blockquote>
          <h3>三人行必有我师焉</h3>
          <footer>摘自孔子 论语 </footer>
        </blockquote>
        <table class="table table-bordered table-striped">
          <thead>
          <tr>
            <th>编号</th>
            <th>书名</th>
            <th>价格</th>
            <th>作者</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>101</td>
            <td>三国志</td>
            <td>35.5</td>
            <td>罗贯中</td>
          </tr>
          <tr>
            <td>102</td>
            <td>西游记</td>
            <td>35.5</td>
            <td>吴承恩</td>
          </tr>
          <tr>
            <td>103</td>
            <td>红楼梦</td>
            <td>35.5</td>
            <td>曹雪芹</td>
          </tr>
          <tr>
            <td>104</td>
            <td>水浒传</td>
            <td>35.5</td>
            <td>施耐庵</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="col-md-3">
        <h2>特色课程</h2>
        <dl>
          <dt>HTML</dt>
          <dd>hyper text markup language</dd>
          <dt>css</dt>
          <dd>cascade style sheet</dd>
          <dt>js</dt>
          <dd>javascript</dd>
        </dl>
        <blockquote class="blockquote-reverse">
          <h3>来自***</h3>
          <footer>总裁寄语</footer>
        </blockquote>
      </div>
    </div>
    <!--版权声明条-->
    <div class="row">
      <div class="col-md-12">
        <p class="text-center">****&copy 2018</p>
      </div>
    </div>
  </div>


  <script src="./js/jquery-1.11.3.js"></script>
  <script src="./js/bootstrap.js"></script>

</body>
</html>

 

重点练习：响应式网页示例：  

  

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link href="./css/bootstrap.css" rel="stylesheet">
  <script src="./js/html5shiv.min.js"></script>
  <script src="./js/respond.min.js"></script>
  <style>
    .navbg{
      background:rgb(3,76,80);
      margin-bottom:10px;
      margin-top:5px;
      border-radius:5px;
      padding-top:5px;
      padding-bottom:5px;
    }
    .leftbg{
      background:rgb(87,8,91);
      color:#fff;
      border-radius:5px;
    }
    .leftbg>ul>li>a{
      background:#fff;
      color:#000;
      margin:5px 10%;
      display:inline-block;
      width:80%;
      height:50px;
      text-align:center;
      line-height:50px;
      border-radius:5px;
    }
    .centerbg{
      background:rgb(255,185,81);
      border-radius:5px;
    }
    .rightbg{
      background:rgb(91,87,8);
      color:#fff;
      border-radius:5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <!--第一行:导航条-->
    <div class="row navbg">
      <div class="col-xs-12 col-sm-6 col-md-4">
        <ul class="list-inline">
          <li><a href="">首页</a></li>
          <li><a href="">影集</a></li>
          <li><a href="">活动</a></li>
        </ul>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-md-offset-4">
        <input  class="form-control" type="text">
      </div>
    </div>
    <!--第二行:主体-->
    <div class="row">
      <div class="col-xs-12 col-sm-4 col-md-3 leftbg">
        <ul class="list-unstyled">
          <li><a href="">豆蔻年华</a></li>
          <li><a href="">花样青春</a></li>
          <li><a href="">激情岁月</a></li>
          <li><a href="">迟暮之年</a></li>
        </ul>
      </div>
      <div class="col-xs-12 col-sm-8 col-md-6 centerbg">
        <!--栅格系统的嵌套使用-->
        <div class="row">
          <div class="col-xs-6 col-sm-3 ">
            <img  class="img-responsive" src="./img/1.jpg" alt="">
          </div>
          <div class="col-xs-6 col-sm-3 ">
            <img  class="img-responsive" src="./img/2.jpg" alt="">
          </div>
          <div class="col-xs-6 col-sm-3 ">
            <img  class="img-responsive" src="./img/3.jpg" alt="">
          </div>
          <div class="col-xs-6 col-sm-3 ">
            <img  class="img-responsive" src="./img/4.jpg" alt="">
          </div>
        </div>
        <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda harum nemo obcaecati, omnis provident rem repellendus! Accusamus asperiores consectetur delectus eligendi eveniet hic iusto porro ratione totam, unde? Repudiandae?</span><span>Adipisci debitis eius eos exercitationem, fugit maxime natus nisi numquam officia quasi quisquam sunt suscipit, voluptas! A accusantium cum eligendi ex inventore magni sit? Atque dicta error quasi quo ullam.</span><span>Accusamus culpa dignissimos, dolore ducimus et exercitationem expedita nemo quae qui saepe suscipit voluptate voluptatem. A, aut dolore ex expedita incidunt modi mollitia nesciunt nobis, omnis praesentium, quia vero vitae.</span><span>A at consequuntur cum, cupiditate dolores fugiat hic, illum nam nisi reprehenderit similique suscipit veniam voluptate! Ab eveniet iusto laboriosam modi nemo nisi perspiciatis provident quas, repellendus saepe sunt voluptas?</span><span>Accusamus aliquam animi architecto aut debitis delectus, deleniti deserunt dolor, exercitationem explicabo fugiat fugit id labore laboriosam libero minus nam necessitatibus nesciunt numquam odio quam, repellat tempora temporibus vel vitae?</span><span>Alias aperiam blanditiis, cumque deserunt doloremque, eaque enim esse ex hic itaque laboriosam minima mollitia nesciunt quasi ratione sequi vero? Assumenda blanditiis debitis eius inventore ipsam nisi, quae ut veritatis.</span><span>Accusantium animi eaque eius est eveniet exercitationem fugiat impedit minima mollitia nesciunt perspiciatis possimus quidem reiciendis repellat rerum, sit velit. Accusamus ea id magnam modi repellendus. Blanditiis deleniti et quis.</span><span>Dolor excepturi harum itaque, magni numquam pariatur quos recusandae. Aut commodi earum eius eum, illum, laborum magni nihil perspiciatis porro quam quas quasi quidem quis quo ratione tenetur ut voluptatibus.</span></p>
      </div>
      <div class="hidden-xs hidden-sm col-md-3 rightbg">
        <p>右侧广告 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut corporis dolor dolore dolorum ducimus incidunt iure, laborum maxime mollitia natus obcaecati porro quaerat quisquam, sed sequi tempore temporibus! Obcaecati, totam?</span><span>Ab amet consectetur culpa doloremque eligendi error est fuga harum impedit itaque magnam magni molestias nobis odio pariatur possimus praesentium quas qui, quis ratione reiciendis sint suscipit unde, veritatis voluptate.</span></p>
      </div>
    </div>
    <!--第三行:版权声明-->
    <div class="row">

    </div>
  </div>
  <script src="./js/jquery-1.11.3.js"></script>
  <script src="./js/bootstrap.js"></script>

</body>
</html>

5.Boostrap第二部分：全局CSS样式——表单——难点

  难点：(1)相关class较多  (2)HTML结构复杂——HTML5规范

  Bootstrap提供了三种形式的表单：

  (1)默认表单

      

       <form>

              <div class="form-group">

                     <label class="control-label"></label>

                     <input class="form-control">

                     <span class="help-block"></span>

              </div>

       </form>

  (2)行内表单

      

       <form class="form-inline">

              <div class="form-group">

                     <label class="sr-only"></label>

                     <input class="form-control">

              </div>

       </form>

  (3)水平表单

       提示：水平表单指在一行中放置label、input、span，需要整合栅格布局系统(变种) 和 表单相关内容。

 

标准栅格系统

水平表单中栅格

外层容器

div.container  或

div.container-fluid

form.form-horizontal

行

div.row

div.form-group

列

div.col-*-*

div.col-*-*

      

       <form class="form-horizontal ">   <!--.container-->

              <div class="form-group">     <!--.row-->

                <div class="col-*-*>           <!--.col-*-*-->

                     <label class="sr-only"></label>

                </div>

                <div class="col-*-*">

                     <input class="form-control">

                </div>

              </div>

       </form>

 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link href="./css/bootstrap.css" rel="stylesheet">
  <script src="./js/html5shiv.min.js"></script>
  <script src="./js/respond.min.js"></script>
  <style>
    .form-horizontal .control-label{
      width:100%;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>全局css样式---表单</h1>
    <p>提示:注意h5规范中推荐的表单写法</p>
    <h3>1.默认表单</h3>
    <form action="">
      <div class="form-group">
        <label class="control-label" for="uname">用户名:</label>
        <input  class="form-control" type="text" id="uname">
        <span class="help-block">用户名中可以包含数字,字母</span>
      </div>
      <div class="form-group">
        <label class="control-label" for="upwd">密码:</label>
        <input  class="form-control" type="text" id="upwd">
        <span class="help-block">密码长度在6-12位之间</span>
      </div>

      <!--注意h5规范推荐的复选框和单选框的写法-->
      <!--SRP:单一责任原则-->
      <div class="form-group">
        <div class="checkbox">
          <label>
            <input type="checkbox">七天之内不再登录
          </label>
        </div>
      </div>
      <div class="form-group">
        <input class="btn btn-success" type="button" value="提交">
        <input class="btn btn-danger" type="button" value="取消">
      </div>
    </form>

    <h3>2.行内表单</h3>
    <form class="form-inline" action="">
      <div class="form-group">
        <!--screen reader only 仅屏幕阅读器可见-->
        <label class="sr-only" for="uname2">用户名:</label>
        <input  class="form-control" type="text" id="uname2" placeholder="请输入用户名">
      </div>
      <div class="form-group">
        <label class="sr-only" for="upwd2">密码:</label>
        <input  class="form-control" type="text" id="upwd2" placeholder="请输入密码">
      </div>
      <div class="form-group">
        <input class="btn btn-success" type="button" value="提交">
      </div>
    </form>

    <h3>3.水平表单</h3>
    <form class="form-horizontal" action="">
      <div class="form-group">
        <div class="col-xs-2">
          <label class="control-label" for="uname3">用户名:</label>
        </div>
        <div class="col-xs-5">
          <input  class="form-control" type="text" id="uname3">
        </div>
        <div class="col-xs-5">
          <span class="help-block">用户名中可以包含数字,字母</span>
        </div>
      </div>
      <div class="form-group">
        <div class="col-xs-2">
          <label class="control-label" for="upwd3">密码:</label>
        </div>
        <div class="col-xs-5">
          <input  class="form-control" type="text" id="upwd3">
        </div>
        <div class="col-xs-5">
          <span class="help-block">密码长度在6-12位之间</span>
        </div>
      </div>

      <!--注意h5规范推荐的复选框和单选框的写法-->
      <!--SRP:单一责任原则-->
      <div class="form-group">
        <div class="col-xs-10 col-xs-offset-2">
          <div class="checkbox">
            <label>
              <input type="checkbox">七天之内不再登录
            </label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-xs-4 col-xs-offset-3">
          <input class="btn btn-success" type="button" value="提交">
          <input class="btn btn-danger" type="button" value="取消">
        </div>
      </div>
    </form>
  </div>
  <script src="./js/jquery-1.11.3.js"></script>
  <script src="./js/bootstrap.js"></script>

</body>
</html>

练习：如何在输入框中放置一个对勾、叉号、放大镜？

 

 

8.Bootstrap第三部分：组件 —— 下拉菜单

  下拉菜单必需的三级结构：

  <div class="dropdown">

       <a data-toggle="dropdown">触发元素</a>

       <ul class="dropdown-menu">隐藏的菜单</ul>

  </div>

  提示：后面必需引入bootstrap.js，其中会查找data-toggle="dropdown"元素，为其绑定事件监听函数。

 

9. Bootstrap第三部分：组件 —— 警告框

  <div class="alert alert-四种颜色 alert-dismissible">

       <span class="close" data-dismiss="alert">&times;</span>

       任意文本内容

  </div>

课后练习：

(1)面试题：Bootstrap为什么把一行等分为12份？

(2)完成“英特尔中国官网首页”的内容和布局

  提示：不用处理字体和颜色相关样式

追涨杀跌的小韭菜
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap(包括scss)复习
qq_42199147的博客
10-05 1064
BootStrap 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。 中文镜像网站：http://www.bootcss.com 英文官网 http://getbootstrap.com 用于开发响应式布局、移动设备优先的 WEB 项目。 1.使用boot 1.创建boot02文件夹，在boot02中创建css和js文件，把4个文件复制进去，使用ws open boot02 2.在w...
BootStrap---day01
蜗牛的博客
08-24 365
bootstrap是当下最时兴的前端框架（也可以说是 界面工具集）具有移动端优先的设计理念特点就是灵活简洁，代码优雅，美观大方其目的是为了让web开发更敏捷学习bootstrap的第一天，总的来说，学习到了一些bootstrap中常用的插件、布局和使用bootstrap的方式方法。在之后的项目开发中，会对各种类名更加熟练，提升开发速度。
练习题(第二模块...模块...选择填空)
weixin_30535843的博客
02-10 528
1、（多选题） 我们在开发过程中经常能够使用到模块这个知识，python中使用模块的好处是（） A使用模块的好处是避免变量和函数的冲突 B使用模块的好处是可重用 C使用模块的好处是提高运行速度 D使用模块的好处是便于维护 答 案： 正确答案: A,B,D, 您的答案: A,B,C,D 统 计： 答题时间: 14秒, 全站答题人数: 6...
Bootstrap基础
黄敢敢i的博客
09-16 659
Bootstrap 欢迎使用Markdown编辑器 为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示： 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了
Bootstrap之移动设备优先、栅格系统、媒体查询，响应式式布局
热门推荐
Army-海军的博客
05-18 1万+
1. html5中head标签里引入 meta Bootstrap 实行移动端优先原则 响应式布局 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"> 2. 不需要再次引入Normalize.css 不需要重置css,Bootstrap内部已引入 如果想下载看看源码。 点...
2022/09/25、26 day13/14：BootStrap（一）
最新发布
w2079930908的博客
09-27 211
Bootstrap
BootStrap---day02、03微金所项目
蜗牛的博客
08-27 533
BootStrap---day02、03微金所项目 今天的任务都做完了，就来写一写这几天使用BootStrap写项目的总结和心得。
100天搞定机器学习（100-Days-Of-ML）（十三）随机森林
徐先森的博客
02-17 266
第十三天 随机森林 随机森林是有监督学习的集成学习模型，主要用于分类和回归。随机森林集成了很多的决策树模型，然后将其每颗树的预测结果组合以获得更加准确和稳定的预测结果。 第一步：导入库并加载数据集 import numpy as np import pandas as pd ​ dataset = pd.read_csv('../datasets/Socail_Network_Ads...
尚硅谷大数据项目之Flink实时数仓-踩坑记录和笔记记录
prague6695的博客
08-11 2536
尚硅谷大数据项目之Flink实时数仓-踩坑记录和笔记记录
SpringBoot + Thymeleaf + Bootstrap + 随手记 实现自动记账
qq499634140的博客
11-17 3106
SpringBoot + Thymeleaf + Bootstrap + 随手记 实现自动记账 一前情提要思路实现项目大体分4个部分 前情提要 在用随手记勤勤恳恳记了6年账之后，突然有天开始变懒了。既然每笔消费都从手机上支出，为什么不写个程序来自动完成这个动作呢？ 思路 目前日常支出无非两种，一种是支付宝，一种是微信。说到这个，再次吐槽微信支付做的真的是一坨shit。 因为都绑定了信用卡，所以只...
Java入门基础及面试100题--初入门
loki的博客
12-15 2141
Java入门基础及面试100题 1、面向对象的特征有哪些方面？ 答：面向对象的特征主要有以下几个方面： - 抽象：抽象是将一类对象的共同特征总结出来构造类的过程，包括数据抽象和行为抽象两方面。抽象只关注对象有哪些属性和行为，并不关注这些行为的细节是什么。 - 继承：继承是从已有类得到继承信息创建新类的过程。提供继承信息的类被称为父类（超类、基类）；得到继承信息的类被称为子类（派生类）。继承让变化中的软件系统有了一定的延续性，同时继承也是封装程序中可变因素的重要手段（如果不能理解请阅读阎宏博士的《Java与
前端移动开发布局_响应式bootstrap
宫小白
01-28 530
知识导航： 响应式开发原理 bootstrap介绍及基本使用（主要） 1.响应式开发原理 利用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的 设备的划分： 小于768的为超小屏幕（手机） 768~992之间的为小屏设备（平板） 992~1200的中等屏幕（桌面显示器） 大于1200的宽屏设备（大桌面显示器） 响应式布局容器 响应式需要一个父级做为布局容器，来配合子级...
bootstrap 一排5个_BootStrap从基础到项目实战_第1季_03章_02_CSS样式栅格系统实例
weixin_34352414的博客
12-05 267
目标目标一、理解什么是栅格布局目标二、掌握栅格布局具体应用目标三、掌握BootStrap通用CSS样式(排版、代码、代码、表单、按钮、图片、辅助类、响应式工具)内容一、BootStrap全局CSS之 - 栅格系统实例1.1 栅格系统实例实战前的理论准备通过下面的截图可以比较清楚的来查看Bootstrap的栅格系统是如何在多种不同的移动设备上面进行工作的。从上面的截图可以看出来，Bootstrap针...
bootstrap cloumn 分割_Bootstrap3 栅格系统-实例：多余的列（column）将另起一行排列...
weixin_28840811的博客
01-12 145
Spring下ActiveMQ实战MessageQueue是分布式的系统里经常要用到的组件,一般来说,当需要把消息跨网段.跨集群的分发出去,就可以用这个.一些典型的示例就是: 1.集群A中的消息需要发送给多个机器共享: 2.集群A中消 ...CSS3初学篇章&lowbar;6&lpar;自定义动画&rpar;自定义动画 由于有一部分低版本的浏览器并不支持的问题,所以这个样式...
Bootstrap
weixin_53037175的博客
12-13 558
Bootstrap 来自Twitter，是目前很受欢迎的前端框架。 它是基于HTML、CSS、JAVASRIPT的，简洁灵活，使得Web开发更便捷。 它有大量的组件样式，这也是它的优点也是缺点，如果我们有特殊的需求，得专门去定制这样式，这样的话，一个网站有大量的非Bootsatrap样式存在，那我们得做大量的CSS重写，这样就失去了其框架的意义。 Bootstrap有个很重要的特性—响应式设计。它支持不同终端来显示同一套代码。 1、Bootstrap全局css样式之布局容器和栅格系统 栅格系统用于通过一系列
简洁、直观、强悍的Bootstrap前端开发框架
无糖加冰
02-25 1114
简洁、直观、强悍的Bootstrap前端开发框架 简洁、直观、强悍的Bootstrap前端开发框架，让我们的web开发变得更迅速、简单. 在我们学习Bootstrap前端开发框架之前,我们先来了解一个概念! 什么是框架? 框架顾名思义就是一套架构,框架有一套比较完整的网页功能解决方案， 而且控制权在框架本身，有预制样式库、组件和插件 。 使用者必须按照框架所规定的某种规范进行开发。 了解完框架以后,我们接下来开始学习Bootstrap. Bootstrap简介 Bootstrap来自Twitter（推
Bootstrap小练习
qq_36365638的博客
08-20 477
Bootstrap 101 Template                                                                                                                              
Bootstrap学习记录【2】【栅格网格系统】
qq_41670382的博客
03-01 287
Bootstrap学习记录【2】 1.栅格网格系统 定义容器大小，最小平分十二份，可以不足12格，不能超12格，超过12就不在一行了 使用此系统，必须使用bootStrap的css: 容器：.container 数据行：.row 列：.col-md-1;.col-md-4;.col-md-8;.col-md-6 （md中屏【桌面显示器】可替换成xs超小屏【手机】、sm小屏【平板】、lg大屏【大桌面显示器】） 例:` <div class="container"> <div class=
解决Bootstrap-switch对话框问题：动态生成与事件绑定
本文主要介绍了如何在Bootstrap框架中使用bootstrap-switch组件创建一个可交互的开关按钮，并解决在dialog页面中点击不触发事件的问题。首先，我们来看如何在HTML中实现基本的开关控件： HTML部分： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值