一天学会Bootstrap，BootStrop常用样式--js--组件---（一）

最新推荐文章于 2021-08-12 14:11:33 发布
最新推荐文章于 2021-08-12 14:11:33 发布
阅读量368 收藏
点赞数
文章标签： 前端 框架 Bootstrap java
SanChi
本文链接：https://blog.csdn.net/weixin_43549208/article/details/100671710
版权

Bootstrap

Bootstrap简介and概述

  1. Bootstrap 是由 Twitter的 Mark Otto和 Jacob Thornton 开发的；
  2. Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品；【GitHub：托管代码的网站】
  3. Bootstrap，基于 HTML、CSS、JAVASCRIPT 的前端框架（半成品）。其预定义一套CSS样式和与样式对应的jQuery代码，我们只需要提供固定HTML结构，添加固定的class样式，就可以完成指定效果的实现；
  4. 用于开发响应式布局、移动设备优先的 WEB 项目；
  5. 提高开发效率；
简单来说Bootstrap是：html+css+js

学习Bootstrap需要有一定得html css js知识
响应式布局
响应式布局 ：一个网站能够兼容多个终端（手机，iPad等），而不需要为每个终端做一个特定的版本。此概念是为解决移动互联网浏览而诞生的；
为什么要用响应式布局 ：响应式布局能够为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用了这个技术，我们不仅看到很多的创新，还看到一些成形的模式；

BootStrap的响应式 ：BootStrap就是响应式布局最成功的的实现，为了兼容不同的浏览器采用jQuery，为了适配不同的终端采用CSS3 Media Query（媒体查询）；如下：
pc端BootStrap官网：
pc端BootStrap官网
pad端BootStrap官网：
pad端BootStrap官网
移动端BootStrap官网：
移动端BootStrap官网
同一个页面在不同的终端上不会出现浏览困难，页面变形，用户体验好。

Bootstrap入门

想要用Bootstrap那我们就必须要有它得环境

点击Bootstrap3中文文档(3.3.7)
在这里插入图片描述
再点击下载Bootstrap
在这里插入图片描述
我们选下载Bootstrap
在这里插入图片描述
以下是下载解压后得Bootstrap目录结构
在这里插入图片描述
在这里插入图片描述
官方给了一段代码，最简单得一个Bootstrap页面
大家可以拷贝运行一下

<!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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- 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]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

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

Bootstrap核心学习

布局容器
BootStrap需要为页面内容包裹一个.container容器 。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

.container和.container-fluid的样式参数：

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

【对比】

  1. .container 容器会随着屏幕的大小变化而变化, 去适配不同区间屏幕；
  2. .container-fluid 相当于就是设置 宽度 100%，多用于移动端宽度撑满整个容器；
  3. .container 用于响应式布局,.container-fluid 多用于移动端宽度撑满整个容器，.container布局用的比较多 ；

媒体查询

BootStrap中媒体查询的作用：

  1. 获取不同屏幕的尺寸信息；
  2. 根据不同屏幕尺寸设置不同的样式；
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的 */

/* 小屏幕（平板 wd>=768px & wd<992） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器 wd>=992px & wd<1200px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器 wd>=1200px） */
@media (min-width: @screen-lg-min) { ... }

栅格系统

Bootstrap最大得亮点栅格系统
什么是栅格系统

  • 栅格系统就是，将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
  • Bootstrap的栅格系统采用了1-12列的模式，并且通过比例计算来设置你定义的列宽。
  • 例如你这一行想要采用两列的布局模式，那么每列的宽度都为外容器的50%，不管你用什么设备浏览，它都会采用这样的比例进行展示。
  • 不过如果当设备宽度小于你设定的最小宽度，那么这两列就会并排成为一列。

Bootstrap栅格系统发挥两个作用：

  1. 对页面进行布局；
  2. 根据设备屏幕，自动调节内容的排列；

栅格系统快速入门
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

  • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
  • 通过“行（row）”在水平方向创建一组“列（column）”。
  • 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
  • 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
  • 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。

接下来，我们演示一下
在演示之前，我们先来看一下，怎么使用Bootstrap

  1. 首先创建工程
    在这里插入图片描述
  2. 直接把Bootstrap解压文件 js、css、fonts文件夹复制到工程里
    在这里插入图片描述
    在这里插入图片描述
    接下来创建test.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.min.css" rel="stylesheet">
    <style type="text/css">
        div {
            border: 1px solid red;
            /*写这个属性我们可以看得更加直观，没有别的用*/
        }
    </style>
</head>
<body>
<!--栅格系统：在布局容器内部，把页面划分成行和列
            1、把页面划分成行和列：
            2、响应式布局处理；
        栅格系统的使用：
            1、所有的栅格必须在布局容器内部： container  container-fluid
            	(1)container ：响应式  布局容器两端会留出空白
            	(2)container-fluid：铺满整个屏幕
            2、行划分：通过设置 class="row"
            2、列划分：
                【1】每一行默认分为 12 列；
                【2】列定义： 通过设置class = "col-xx-n"
                             class="col-md-1"  指的是 在中等屏幕下，占一份

       栅格参数：col-xx-n
            大屏幕（>=1200px）： col-lg-n
            中等屏幕：(992~1200) ：col-md-n  col-md-2
            小屏幕：（768~992）  ： col-sm-n
            超小屏幕： <=768     : col-xs-n-->
            
<div class="container"><!--首先要写容器 .container 或 .container-fluid-->
    <div class="row"><!--再写行 里面写列 行(row)可在容器里有很多个，也可以嵌套在行(row)里或列里-->
        <!--我们先写12个 每个div占1列-->
        <div class="col-md-1">md-1</div>
        <div class="col-md-1">md-1</div>
        <div class="col-md-1">md-1</div>
        <div class="col-md-1">md-1</div>
        <div class="col-md-1">md-1</div>
        <div class="col-md-1">md-1</div>
        <div class="col-md-1">md-1</div>
        <div class="col-md-1">md-1</div>
        <div class="col-md-1">md-1</div>
        <div class="col-md-1">md-1</div>
        <div class="col-md-1">md-1</div>
        <div class="col-md-1">md-1</div>
    </div>
</div>

<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

效果如下：
在这里插入图片描述
栅格参数

超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)
栅格系统行为总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度None （自动）750px970px1170px
类前缀.col-xs-.col-sm-.col-md-.col-lg-
列（column）数12
最大列（column）宽自动~62px~81px~97px
槽（gutter）宽30px （每列左右均有 15px）
可嵌套是
偏移（Offsets）是
列排序是

【移动设备和桌面屏幕】

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

【手机、平板、桌面】

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

大家根据以上参数，多去试一试

排版

标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。
标题标签

<!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.min.css" rel="stylesheet">
    <style type="text/css">
    </style>
</head>
<body>
<div class="container">
    <h1>h1.xxxxxx<small>副标题</small></h1>
    <h2>h2.xxxxxx</h2>
    <h3>h3.xxxxxx</h3>
    <h4>h4.xxxxxx</h4>
    <h5>h5.xxxxxx</h5>
    <h6>h6.xxxxxx</h6>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script src="js/bootstrap.min.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.min.css" rel="stylesheet">
    <style type="text/css">
    </style>
</head>
<body>

<div class="container">
    <span class="h1">h1.xxxxxx<small>副标题</small></span>
    <span class="h2">h2.xxxxxx</span>
    <span class="h3">h3.xxxxxx</span>
    <span class="h4">h4.xxxxxx</span>
    <span class="h5">h5.xxxxxx</span>
    <span class="h6">h6.xxxxxx</span>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

在这里插入图片描述
文字对齐方式
通过文本对齐类，可以简单方便的将文字重新对齐。

样式名（class属性值）说明
.text-left设定文本左对齐
.text-center设定文本居中对齐
.text-right设定文本右对齐
.text-justify设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap段落中超出屏幕部分不换行

【示例】

<!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.min.css" rel="stylesheet">
    <style type="text/css">
    </style>
</head>
<body>

<div class="container">
    <p class="text-left">我居左</p>
    <p class="text-center">我居中</p>
    <p class="text-right">我居右</p>
    <!--
        两端对齐：设定文本对齐,段落中超出屏幕部分文字自动换行
    -->
    <p class="text-justify">
        文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐
        文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐
        文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐
        文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐
        文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐
        文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐
        文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐
        文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐
    </p>
    <!--
        不被包裹：段落中超出屏幕部分不换行
    -->
    <p class="text-nowrap">
        文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐
        文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐
        文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐
        文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐
        文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐
        文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐
        文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐
        文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐文本对齐
    </p>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script src="js/bootstrap.min.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.min.css" rel="stylesheet">
    <style type="text/css">
    </style>
</head>
<body>

<div class="container">
    <!--列表：有序，无序-->
    <ol class="list-unstyled" style="font-size: 20px">
        <li>百度</li>
        <li>腾讯</li>
        <li>阿里</li>
    </ol>
    <ul class="list-inline" style="font-size: 20px">
        <li>百度</li>
        <li>腾讯</li>
        <li>阿里</li>
    </ul>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

在这里插入图片描述
今天先写到这，继续更新！

大家有什么建议可以私信我！！！

San_Chi
关注
BootStrapCSS样式和JS插件
weixin_42867975的博客
07-22 320
BootStrapCSS样式和JS插件 文章目录 一、全局CSS样式： 1、按钮 2、图片： 3、表格 4、表单 二、组件和插件 ...
bootstrap-datepicker学习之options
qq_35134066的博客
04-08 1394
$('#id').datepicker({ format: 'yyyy/mm/dd', // 日期格式化 container: 'body', // 弹出时间选择器的代码是添加到哪里的,默认是body下,可以设置填写css字符串指定弹出的代码添加的位置 autoclose: true, // 选中日期后日历自动关闭 forcePar...
bootstrap所有js.css
12-06
这个是我收集全的bootstrap的js,css比另一份更全,下载这个
每天学点bootstrap(一)
漫长学习路
09-18 1799
什么是 Bootstrap？Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。优点：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。Bootstrap CSSBootstrap CSS主要是对CSS的一下兼容和CSS的一些模板做了很多封装。使用Bootstrap我们不必自己去编写CS
春江花月夜
weixin_30677073的博客
09-05 238
作者：张若虚 春江潮水连海平，海上明月共潮生。 滟滟随波千万里，何处春江无月明！ 江流宛转绕芳甸，月照花林皆似霰; 空里流霜不觉飞，汀上白沙看不见。 江天一色无纤尘，皎皎空中孤月轮。 江畔何人初见月？江月何年初照人？ 人生代代无穷已，江月年年只相似。 不知江月待何人，但见长江送流水。 白云一片去悠悠，青枫浦上不胜愁。 谁家今夜扁舟子？何处相思明月楼？ 可怜楼上月徘...
BootStrop--bootstrap-paginator.js 分页 插件 的使用
帅气Dee海绵宝宝
11-01 363
样式图 引入资源 <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.min.js"></script> <link type="text/css" rel="stylesheet" href="<%=request.getContext...
bootstrap-datepicker实现只能选择每一年的某一个月份
最新发布
09-11
`beforeShowDay`是一个回调函数，会在日历展示之前被调用，用于决定每一天是否可选。我们可以在这个函数中检查日期的月份，如果不符合我们的设定，就返回`false`使其不可选。 首先，我们需要引入bootstrap-...
bootstrap3插件-时间范围自定义选择器DateRangePicker.zip
07-21
这款插件充分利用了Bootstrap的样式框架，确保与Bootstrap3的其他组件保持一致的视觉效果，为用户提供简洁、直观的交互体验。 DateRangePicker是基于jQuery构建的，这意味着你需要在你的项目中包含jQuery库才能使用...
天蓝色One Page响应式bootstrap网页模板-响应式 单页 手机 服务 咨询 互联网 报价 fixed 黑色
11-20
标题中的“天蓝色One Page响应式bootstrap网页模板”是一个基于Bootstrap框架设计的单页网站模板，主要用于创建具有现代化视觉效果的网页。这个模板的特点在于它的响应式设计，意味着无论用户使用桌面、平板还是手机...
jstree与Bootstrap-table结合案例
weixin_43321771的博客
08-12 1359
前言 最近俺找了个实习的工作，第一次来实习，带我的老师给安排了一个小任务，要把地域按树形结构显示出来。 最开始采用的是BootBtrap-Table-Treegird组件，但是数据量3000多条，渲染就要5、6分钟，时间太长了，PASS掉。 接下去就去找能不能使用异步加载的方式，可惜，官方地址说不支持异步加载。本着学习的态度又去找了大佬maskainv的文章，改造bootstrapTreeTable插件实现异步加载（文章地址在这，有兴趣的大佬可以看一看：改造bootstrapTreeTable插件实现异步加
基于bootstrop前端网页模板
07-10
基于bootstrop前端网页模板，容易上手，易用，该框架适用于后台系统
Bootstrap样式
yananye的博客
07-28 871
Bootstrap简介 下载 Bootstrap基础模板 Bootstrap架构 Bootstrap 12栅格系统 Bootstrap 12栅格系统的使用 引入Bootstrap框架模板 <html> <head> <meta charset="UTF-8"> <title>bootstrap基础模板</title> <!--引入Jquery文件--> <script src="js/jquery-1
深入理解BootStrap Item15 -- 媒体对象(media)
小平果的欢乐谷
11-18 2325
在Web页面或者说移动页面制作中，常常看到这样的效果，左边居左（或居右），内容居右（或居左）排列，如下图所示：我们常常把这样的效果称为媒体对象。可以说他是一种抽像的样式，可以用来构建不同类型的组件。这些组件都具有开篇所说的样式风格。那么在Bootstrap框架中特意将些部分提取出来做来一个组件介绍。其对应的版本文件：☑ LESS版本：对应的源文件是media.less☑ Sass版本：对应的源文件是
bootstrap-treeview分级展示列表树的实现
weixin_30268071的博客
02-14 454
html页面： 　　要引用 "/webapp/common/css/bootstrap-treeview.css" "/webapp/common/js/bootstrap-treeview.js", <div class="row"> <div class="col-md-3" style="width: 350px;"> <!--<di...
MyBatis入门（五）---延时加载、缓存
小城我家
10-31 418
一、创建数据库 1.1、建立数据库    数据表和数据       二、创建项目 2.1、创建项目   三、建立实体类与Mapper接口 3.1、3个实体类   package com.pb.mybatis.po; import java.util.Date; /** * * @ClassName:
JS组件系列——两种bootstrap multiselect组件大比拼
weixin_33894992的博客
12-03 222
前言：今天继续来看看bootstrap的另一个组件：multiselect。记得在项目开始之前，博主项目组几个同事就使用哪些js组件展开过讨论，其中就说到了select组件，由于项目的整体风格使用的bootstrap风格，所以在选用select组件的时候优先考虑和bootstrap结合使用的。其中就找到了两个这种组件，大体样式和功能基本相同，经过一番讨论，项目组决定使用davidstutz的boo...
Bootstrap框架使用及可视化布局
Hello, New World!
05-17 6064
Bootstrap框架的入门学习1. Bootstrap 概述2. Bootstrap 环境配置3. Bootstrap 基本使用4. Bootstrap 可视化布局 1. Bootstrap 概述 Bootstrap是一个前端框架，由Twitter开发，非常受欢迎。 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 相当于半成品；开发人员基于框架可以进行二次开发，大大的节省开发人员的开发时间。 特点： 定义了很多的css样式和js插件
js的@media用法（根据不同页面适应）
weixin_43085797的博客
03-26 4351
响应式布局 responsive design @media 属性 bootstrap css 分析： @media (min-width:768px){ body{***} } use @media about the browser as a media [disabled] | :active | @media mediatype and|not|only (media...
bootstrap-switch,切换触发事件及动态切换以及readonly属性设置
zhangustb
08-07 1451
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <link h.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值