学习笔记之Bootstrap基础

最新推荐文章于 2022-10-06 16:31:49 发布
最新推荐文章于 2022-10-06 16:31:49 发布
阅读量359 收藏 1
点赞数
文章标签： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37431724/article/details/80762036
版权

 

一、标题

元素

字体大小

计算比例

其他

h1

36px

14px*2.60

margin-top:20px;

margin-bottom:10px;

h2

30px

14px*2.15

h3

24px

14px*1.70

h4

18px

14px*1.25

margin-top:20px;

margin-bottom:10px;

h5

14px

14px*1

h6

12px

14px*0.85

small

 

h1~h3*0.65

一般用作副标题，在标题标签内使用

 

h4~h6*0.75

 

 

二、代码

类名

用法

code

显示单行内联代码

pre

显示多行块代码

kbd

显示用户输入代码

e.g.

 

 

三、文本对齐方式

类名

用法

text-left

左对齐

text-center

居中对齐

text-right

右对齐

text-justify

两端对齐

 

 

四、表格

类名

用法

table

基础表格

table-striped

斑马线表格

table-bordered

带边框的表格

table-hover

鼠标悬停高亮的表格

table-condensed

紧凑型表格

table-responsive

响应式表格

 

1. 斑马线表格：table-striped

 

2. 带边框的表格：table-bordered

 

3. 鼠标悬停高亮的表格：table-hover

 

4. 紧凑型表格：table-condensed

 

5. 响应式表格：table-responsive

当浏览器可视区域小于768px时，表格底部会出现水平滚动条。可视区域大于768px时，表格底部水平滚动条就会消失。

 

 

六、表单

类名

作用

用法

form-group

 

把标签和控件放在一个带有 class .form-group 的 <div> 中

form-control

 

向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。

form-horizontal

垂直显示表单

加在form元素添加此class

form-inline

内联表单

加在form元素添加此class

checkbox-inline

checkbox水平排列

在label标签上添加类名“checkbox-inline”

radio-inline

radio水平排列

在label标签上添加类名“radio-inline”

has-warning

警告状态（黄色）

只需要在form-group容器上对应添加状态类名

has-error

错误状态（红色）

has-success

成功状态（绿色）

has-feedback

表单验证时状态icon

此类名要与“has-error”、“has-warning”和“has-success”在一起使用

help-block

提示信息

 

 

1. form-horizontal水平表单：

 

 

2. form-inline内联表单

 

3. 表单控件状态(验证状态)

 

4. 表单例子：

<form class="form-horizontal form" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> 记住密码
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">进入邮箱</button>
    </div>
  </div>
</form>

 

 

七、图像

类名

作用

img-responsive

响应式图片，主要针对于响应式设计

img-rounded

圆角图片

img-circle

圆形图片

img-thumbnail

缩略图片

 

 

八、 网格系统

类名

作用

col-**-*

网格

col-**-offset-*

偏移列

row

行, 必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)

col-**-push-*

向右移动*个列的距离

col-**-pull-*

向左移动*个列的距离

 

 

1. 网格选项

 

超小设备手机（<768px）

小型设备平板电脑（≥768px）

中型设备台式电脑（≥992px）

大型设备台式电脑（≥1200px）

网格行为

一直是水平的

以折叠开始，断点以上是水平的

以折叠开始，断点以上是水平的

以折叠开始，断点以上是水平的

最大容器宽度

None (auto)

750px

970px

1170px

Class 前缀

.col-xs-

.col-sm-

.col-md-

.col-lg-

列数量和

12

12

12

12

最大列宽

Auto

60px

78px

95px

间隙宽度

30px
（一个列的每边分别 15px）

30px
（一个列的每边分别 15px）

30px
（一个列的每边分别 15px）

30px
（一个列的每边分别 15px）

可嵌套

Yes

Yes

Yes

Yes

偏移量

Yes

Yes

Yes

Yes

列排序

Yes

Yes

Yes

Yes

 

2. 基本用法

<div class="container">
  <div class="row">
    <div class="col-md-8 col-xs-6">
        网格1
      <div class="row">
        <div class="col-md-8">8</div>
        <div class="col-md-4">4</div>
      </div>
    </div>
    <div class="col-md-4 col-xs-6">
        网格2
        <div class="row">
            <div class="col-md-9">9</div>
            <div class="col-md-3">3</div>
        </div>
    </div>
  </div>
</div>

 

3. 图列：

 

 

九、下拉菜单

类名

作用

dropdown-toggle

下拉触发器

divider

下拉菜单（下拉分隔线）

dropdown-header

菜单标题

dropdown-menu-right

下拉菜单（对齐方式）

pull-right

下拉菜单（对齐方式）

 

1. 示例代码

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    下拉菜单
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div>

 

2. 图例：

 

 

十、按钮

类名

作用

btn

基础按钮

btn-default

默认按钮

btn-primary

主要按钮

btn-group

按钮（按钮组）

btn-group-vertical

按钮（垂直分组）

btn-group-justified

按钮（等分按钮）

 

1. 按钮样式：

 <div>
       <button class="btn" type="button">基础按钮.btn</button>  
       <button class="btn btn-default" type="button">默认按钮.btn-default</button> 
       <button class="btn btn-primary" type="button">主要按钮.btn-primary</button> 
       <button class="btn btn-success" type="button">成功按钮.btn-success</button> 
       <button class="btn btn-info" type="button">信息按钮.btn-info</button> 
       <button class="btn btn-warning" type="button">警告按钮.btn-warning</button> 
       <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> 
       <button class="btn btn-link" type="button">链接按钮.btn-link</button>         
</div>

 

2.  按钮嵌套分组：

<div class="btn-group">
  <button class="btn btn-default" type="button">首页</button>
  <button class="btn btn-default" type="button">产品展示</button>
  <button class="btn btn-default" type="button">案例分析</button>
  <button class="btn btn-default" type="button">联系我们</button>
  <div class="btn-group">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
    <ul class="dropdown-menu">
    	<li><a href="##">公司简介</a></li>
    	<li><a href="##">企业文化</a></li>
    	<li><a href="##">组织结构</a></li>
    	<li><a href="##">客服服务</a></li>
    </ul>
  </div>
</div>

 

 

十一、 导航：

类名

作用

用法

nav-tabs

标签形导航

在原导航“nav”上追加此类名

navbar-header

菜单前面都会有一个大标题

 

navbar-brand

 

navbar-fixed-top

导航条固定在浏览器窗口顶部

 

navbar-fixed-bottom

导航条固定在浏览器窗口底部

 

thumbnail

缩略图

 

nav-pills

导航（胶囊形(pills)导航）

在原导航“nav”上追加此类名

nav-stacked

导航（垂直堆叠的导航）

在“nav-pills”的基础上添加一个“nav-stacked”类

nav-justified

自适应导航（使用）

和“nav-tabs”或者“nav-pills”的基础上添加

breadcrumb

面包屑式导航

 

 

1. nav-tabs

<ul class="nav nav-tabs">
    <li class="active"><a href="##">Home</a></li>
 	<li><a href="##">CSS3</a></li>
 	<li><a href="##">Sass</a></li>
 	<li><a href="##">jQuery</a></li>
 	<li><a href="##">Responsive</a></li>
</ul>

 

 2. nav-pills：

 

3. nav-stacked：

 

4. breadcrumb：

<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">我的书</a></li>
  <li class="active">《图解CSS3》</li>
</ol>

 

5. btn-group-justified:

<div class="btn-wrap">
    <div class="btn-group btn-group-justified">
    <a class="btn btn-default" href="#">首页</a>
    <a class="btn btn-default" href="#">产品展示</a>
    <a class="btn btn-default" href="#">案例分析</a>
    <a class="btn btn-default" href="#">联系我们</a>
  </div>
</div>

 

 

 

6. 响应式导航

<div class="navbar navbar-default">
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <!--<span class="sr-only">Toggle Navigation</span>-->
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">nav-bar</a>
    </div>

    <div class="collapse navbar-collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a>网站首页</a></li>
            <li><a href="##">系列教程</a></li>
            <li><a href="##">名师介绍</a></li>
            <li><a href="##">成功案例</a></li>
            <li><a href="##">关于我们</a></li>
            <li class="btn-group">
                <a class="dropdown-toggle" data-toggle="dropdown">
                    下拉菜单
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu dropdown-menu-left">
                    <li class="dropdown-header">第一部分菜单头部</li>
                    <li><a href="#">下拉菜单项</a></li>
                    <li><a href="#">下拉菜单项</a></li>
                    <li class="divider"></li>
                    <li class="dropdown-header">第二部分菜单头部</li>
                    <li><a href="#">下拉菜单项</a></li>
                    <li><a href="#">下拉菜单项</a></li>
                </ul>
            </li>
            <form action="##" class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="请输入关键词" />
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
        </ul>
    </div>
</div>

 

 

十二、媒体对象

类名

作用

media

媒体对像的容器

media-object

媒体对像的对象

media-body

媒体对象的主体

media-heading

媒体对象的标题

pull-left或pull-right

控制媒体对象中的对象浮动方式

media-list

媒体对象列表

 

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="https://img4.sycdn.imooc.com/588471d20001809e07150715-140-140.jpg" alt="...">
    </a>
    <div class="media-body">
        <h4 class="media-heading">media1</h4>
        <div>media1media1media1media1media1media1media1media1</div>
        <div class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src="https://img4.sycdn.imooc.com/588471d20001809e07150715-140-140.jpg"
                     alt="...">
            </a>
            <div class="media-body">
                <h4 class="media-heading">media2</h4>
                <div>media2media2media2media2media2media2media2media2</div>
            </div>
        </div>
    </div>
</div>

 

 

 

十三、 列表组

类名

作用

list-group

列表组容器

list-group-item

列表项

list-group-item-heading

列表项头部样式

list-group-item-text

列表项主要内容

 

<div class="list-group">
    <a href="##" class="list-group-item active"><span class="badge">5902</span>多彩列表组</a>
    <a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
    <a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>
        <h4 class="list-group-item-heading">图解CSS3</h4>
        <p class="list-group-item-text">
            详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性...</p>
    </a>
    <a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中国</a>
    <a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
</div>

 

 

 

十四、面板

类名

作用

panel

面板

panel-default

基础面板

panel-heading

面板头部样式

panel-footer

面板尾部样式

panel-primary

基础样式

 

<div class="panel panel-primary panel-default">
    <div class="panel-heading">panel-heading</div>
    <div class="panel-body">
        <p>panel-body panel-body panel-body panel-body panel-body panel-body panel-body panel-body panel-body panel-body
            panel-body panel-body panel-body panel-body </p>
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>＃</th>
                <th>表格头</th>
                <th>表格头</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>表格项</td>
                <td>表格项</td>
            </tr>
            </tbody>
        </table>
        <br>
        <ul class="list-group">
            <li class="list-group-item">我是列表项</li>
            <li class="list-group-item">我是列表项</li>
            <li class="list-group-item">我是列表项</li>
        </ul>
    </div>
    <div class="panel-footer">panel-footer</div>
</div>

 

 

 

十五、 模态弹出框

类名

作用

modal

模态弹出框

modal-header

弹出框头部

modal-body

弹出框主体

modal-footer

弹出框脚部

modal-dialog

模态弹出窗

modal-backdrop

蒙层样式

 

1. 模态弹出框--触发模态弹出窗2种方法

方法一：

1）data-toggle必须设置为modal(toggle中文翻译过来就是触发器)；

2）data-target可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，一般情况设置为模态弹出窗的ID值，因为ID值是唯一的值。

<!-- 触发模态弹出窗的元素 -->
<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">点击我会弹出模态弹出窗</button>
<!-- 模态弹出窗 -->
<div class="modal fade" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
        <!-- 模态弹出窗内容 -->
        </div>
    </div>
</div>

 

方法二：

触发模态弹出窗也可以是一个链接<a>元素，那么可以使用链接元素自带的href属性替代data-target属性，如：

<!-- 触发模态弹出窗的元素 -->
<a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >点击我会弹出模态弹出窗</a>
<!-- 模态弹出窗 -->
<div class="modal fade"  id="mymodal" >
    <div class="modal-dialog" >
        <div class="modal-content" >
        <!-- 模态弹出窗内容 -->
        </div>
    </div>
</div>

 

2. 参数设置：

参数

使用方法

描述

toggle

$(“#mymodal”).modal(“toggle”)

触发时，反转模态弹出窗的状态。如果模态弹出窗是显示的，则关闭；反之，如果模态弹出窗是关闭的，则显示

show

$(“#mymodal”).modal(“show”)

触发时，显示模态弹出窗

hide

$(“#mymodal”).modal(“hide”)

触发时，关闭模态弹出窗

 

3. 事件设置：

模态弹出窗还支持四种类型的事件，分别是模态弹出窗的弹出前、弹出后，关闭前、关闭后，具体描述如下：

事件类型

描述

show.bs.modal

在show方法调用时立即触发（尚未显示之前）；如果单击了一个元素，那么该元素将作为事件的relatedTarget属性

shown.bs.modal

该事件在模态弹出窗完全显示给用户之后（并且等CSS动画完成之后）触发；如果单击了一个元素，那么该元素将作为事件的relatedTarget事件

hide.bs.modal

在hide方法调用时（但还未关闭隐藏）立即触发

hidden.bs.modal

该事件在模态弹出窗完全隐藏之后（并且CSS动画漂完成之后）触发

 

十六、进度条

 

类名

作用

progress

进度条容器

progress-bar

限制进度条的进度

progress-striped

条纹进度条

 

1. 动态进度条

<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" style="width:30%">30%</div>
</div>
progress-bar-striped：条纹
active：动态

 

 

2. 层叠进度条

 

<div class="progress"> <div class="progress-bar progress-bar-success" style="width:20%">20%</div> <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%">20%</div> <div class="progress-bar progress-bar-warning" style="width:30%">30%</div> <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%">15%</div> </div>

 

 

十七、 其它

类名

作用

thumbnail

缩略图

caption

让缩略图配合标题、描述内容，按钮等

alert

警示框

badge

徽章

pagination

页码

 

1. 缩略图

<div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
        <img src="http://img1.sycdn.imooc.com/5434eba100014fe906000338.png"
             style="height: 180px; width: 100%; display: block;" alt="">
    </a>
    <div class="caption">
        <h3>Bootstrap框架系列教程</h3>
        <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
        <p>
            <a href="##" class="btn btn-primary">开始学习</a>
            <a href="##" class="btn btn-info">正在学习</a>
        </p>
    </div>
</div>

 

2. 可关闭的警示框

只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤：

  1）需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。

  2）在button标签中加入class="close"类，实现警示框关闭按钮的样式。

  3）要确保关闭按钮元素上设置了自定义属性：“data-dismiss="alert"”（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）。

 

<div class="alert alert-info" role="alert">
    <button class="close" type="button" data-dismiss="alert">×</button>
    请修改相应信息
</div>

 

 

3. 徽章

<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
    <li class="active">
        <a href="#">
            <span class="badge pull-right">42</span>
            Home
        </a>
    </li>
    <li><a href="#">Profile</a></li>
    <li>
        <a href="#">
            <span class="badge pull-right">3</span>
            Messages
        </a>
    </li>
</ul>

 

4. 页码

<ul class="pagination pagination-sm">
  <li><a href="#">第一页</a></li>
  <li class="previous"><a href="#">«</a></li>
  <li><a href="#">11</a></li>
  <li><a href="#">12</a></li>
  <li class="active"><a href="#">13</a></li>
  <li><a href="#">14</a></li>
  <li><a href="#">15</a></li>
  <li class="next"><a href="#">»</a></li>
  <li class="disabled"><a href="#">最后一页</a></li>
</ul>

 

 

 

 

皆凡人
关注
BootStrap学习记录
太多的虚幻
09-06 1128
1、当主标题下需要副标题时可在h中嵌套small<h1>nihao<small>a</samll></h1> 2、当某一段落需要突出显示时可添加lead类,其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理 class=”lead”3、在普通的元素中我们一般通过font-weight设置为bold关键词给文本加粗。在Bootstrap中，可以使用和标签让文本直接加粗。4、斜体类
Bootstrap3 栅格系统之列平移
歪脖先生的博客
05-02 1511
列平移 使用 .col-md-offset-* 类，可以将列向右侧平移，* 指定要平移的列数。平移的本质，是为元素增加 * 列的左外边距（margin-left）。如，.col-md-offset-4 类将 .col-md-4 元素向右侧平移 4个列（column）的宽度，也就是为它增加 4 列的左外边距。如： <divclass="row"> <divc...
BootStrap-CSS样式_排版_表单、表单控件
LoveyourselfJiuhao的博客
12-01 2067
1. 基本表单 form样式：默认不显示，基本表单 form-group样式：表单内设置分组 form-control样式：设置控件并绑定控件默认样式 2. 内联表单 form-inline样式：设置为内联排列表单 3. 水平排列表单 form-horizontal样式：设置为水平排列表单 4. 表单支持控件 type="text"：文本框 textarea标签：多行文本框 ...
bootstrap之表单
zhengun的专栏
05-11 341
关于作者： 郑云飞, 程序员Java（web前端，web后端，oracle数据库or mysql数据库） 艺名：天放 weibo：@tianFang blog: zhengyunfei.iteye.com email: zhengyunfei8@gmail.com 本文主要讲解的是表单，这个其实对于做过网站的人来说，并不陌生，而且可以说是最为常用的提交数据的Form表单。 本...
bootstrap基础知识学习笔记
09-01
Bootstrap 基础知识学习笔记主要涵盖了以下几个核心概念： 1. **引入 Bootstrap**：在 HTML 文件中，你需要引入 Bootstrap 的 CSS 和 JavaScript 文件。这通常包括 jQuery（因为 Bootstrap 的某些组件依赖于它）。...
bootstrap学习笔记之初识bootstrap
01-19
Bootstrap是一款目前非常流行的前端框架，简单的说，就是html,css,javascript的工具集，...它基于jQuery框架开发，在jQuery框架的基础上进行了更为人性化和个性化的完善，形成了一套自己独有的网站风格，并兼容大部分j
Bootstrap3.0学习笔记之表格相关
09-22
Bootstrap3.0是世界上最受欢迎的前端开发框架之一，它提供了丰富的预定义样式，使得构建美观且响应式的网页变得更加容易。本篇文章将详细讲解Bootstrap3.0中的表格组件，包括其不同类型的表格及其应用场景。 首先，...
Bootstrap3.0学习笔记之入门篇
09-22
Bootstrap是一个流行的前端框架，由Twitter开发，目的是为了简化网页设计和开发过程。...Bootstrap3.0是该框架的一个重要版本，提供了...通过这些知识点的学习，可以为后续深入学习Bootstrap的高级特性打下坚实的基础。
bootstrap栅栏系统css中的col-xs-*,col-sm-*,col-md-* 的意义
lzf的博客
05-24 1514
摘要: bootstrap栅栏系统css中的col-xs-*,col-sm-*,col-md-* 的意义：.col-xs-*超小屏幕手机(768px),.col-sm-*小屏幕平板(≥768px),.col-md-*中等屏幕桌面显示器 首先说明： 1、col-列； 2、xs-maxsmall，超小；sm-small，小；md-medium，中等； 3
Bootstrap中col-*-offset和col-*-push的区别
切糕的技术博客
11-24 2万+
Bootstrap中col-*-offset和col-*-push的区别
Bootstrap栅栏布局里col-xs-*、col-sm-*、col-md-*、col-lg-*之间的区别及使用方法
热门推荐
知行合一，跬步致远
03-24 7万+
概括 一句话概括，就是根据显示屏幕宽度的大小，自动的选用对应的类的样式。 关键字 1、col是column简写：列； 2、xs是maxsmall简写：超小， sm是small简写：小，  md是medium简写：中等， lg是large简写：大； 3、-* 表示占列数，即占每行row分12列栅格系统比； 4、.col-xs-* 超小屏幕如手机 （&lt;768px）时使用；     ...
Bootstrap3 横向表单/水平表单
歪脖先生的博客
05-07 4310
横向表单 通过为表单添加.form-horizontal类，并联合使用 Bootstrap的栅格类，便可以将label标签和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加.row了。如： <formclass="form-horizontal"> <divclass="form-gro...
E01-前端整合：【案例】添加数据页面
m0_58086930的博客
10-06 296
前端整合：【案例】添加数据页面
Bootstrap学习笔记（三）组件
kun的博客
12-05 1010
1、复习总结：全局CSS样式： 按钮  .btn .btn-default 图片  .img-rounded  .img-circle  .img-thumbnail  .img-responsive 文本  .text-五种  .bg-五种  .text-left/right/center/justify 排版和代码   .list-unstyled   .list-inline 表格...
bootstrap里面col-xs , col-sm ,col-md,col-lg的使用
Jason
05-10 2万+
col-lg一般用于大屏设备，(min-width:1200px);col-md一般用于中屏设备，(min-width：992px);col-sm一般用于小屏设备，(min-width：768px);col-xs用于超小型设备，(max-width：768px);后面跟数字是几，也就是占几份,比如是4，也就是一行可以显示3个;或者12，就是一行可以显示1个。关于使用，一般设置的话四个属性都用到会比...
示例学习-树形菜单的形成---使用vue.js
mia1106的博客
08-01 7882
第一步，获得树形数据 对于渲染成一个树形菜单，也就是我们平时见到的多级菜单，我们首先要将数据处理成树形结构。这里笔墨不多写了，假设我们拿到的demoData就已经是的了。 第二步，渲染数据 假设我们拿到的数据第一层是数组。 在我们的页面上只需要有一个ul以及一个我们接下来定义的组件item。这里由于我们第一层数据是数组，因此我们在这里做了一个循环。这里同时要注意vue是使用props从父组
bootstrap col-xs-offset无效解决方案
nihaoliyibing的专栏
01-13 8715
使用 col-xs-offset-1 col-sm-offset-0可以在小屏幕上实现偏移并且不会影响到更大的屏幕
JavaWeb---BootStrap
weixin_65440201的博客
07-31 1074
1.Bootstrap： 1.1概念： 1.2快速入门 1.2响应式布局 1.2.1实现： 1.2.2步骤： 1.3CSS样式和JS插件 1.3.1全局CSS样式： 1.3.2组件： 1.3.3插件： 1.Bootstrap： 1.1概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 框架的定义:一个半成品软件，开发人员可以在框
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值