Bootstrap基础——学习笔记

其他 2019-03-16 21:41:07 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_37431724/article/details/80762036

一、标题

元素

字体大小

计算比例

其他

h1

36px

14px*2.60

margin-top:20px;

margin-bottom:10px;

h2

30px

扫描二维码关注公众号，回复： 5554042 查看本文章

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>

猜你喜欢

转载自blog.csdn.net/qq_37431724/article/details/80762036
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
周排行
Metasploit文件目录与入侵基本概念
跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案
CodeIgniter 源码解读之 CodeIgniter.php（二）
SAS入门之（四）改变数据类型
初识元组
[数学建模]数学建模算法和模型（B站视频）（二）
Nginx 服务器源码安装配置流程
C#实现语音视频录制 【基于MCapture + MFile】
开发进度4
下载安装vue的方法网址
每日归档
更多
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022