bootstrap框架

肆曾相识

于 2023-02-03 20:44:24 发布

阅读量142

点赞数

分类专栏： bootstrap 文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/l2298202515/article/details/128875528

版权

bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

bootstrap框架的使用布局

布局容器
bootstarp需要为页面内容和栅格系统包裹一个.container容器，bootstrap预先定义好了这个类
使用方法

创建文件夹结构
创建html骨架结构
引入相关样式文件
书写内容

栅格系统

栅格系统

指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局，然后bootstrap提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为12列


超小屏幕（小于768px）	col-xs-份数
小屏设备（>=768px ~ <992px）	col-sm-份数
中等屏幕（>= 992px ~ <1200px）	col-md-份数
宽屏设备（>=1200px）	col-lg- 份数

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为.row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。

表格

table标签中的表格样式
（1）.table：基础表格
（2）.table-striped：斑马线表格（灰色和白色交替）
（3）.table-bordered：带边框的表格
（4）.table-hover：鼠标悬停高亮的表格（一整行）
（5）.table-condensed：紧凑型表格（行与行之间紧凑）

tr、th、td样式，控制了行的不同背景颜色
（1）.active：将悬停的颜色应用在行或单元格上
（2）.success：表示成功的操作（绿色）
（3）.info：表示信息变化的操作（蓝色）
（4）.warning：表示一个警告的操作（黄色）
（5）.danger：表示一个危险的操作（红色）

表单

单中常见的元素主要包括：

文本输入框
下拉选择框
单选按钮
复选按钮
文本域和按钮等

在Bootstrap框架中，通过定制了一个类名form-control，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。

水平表单

Bootstrap框架默认的表单是垂直显示风格，在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：
　　1、在元素是使用类名“form-horizontal”。
　　2、配合Bootstrap框架的网格系统。

在元素上使用类名“form-horizontal”主要有以下几个作用：
　　1、设置表单控件padding和margin值。
　　2、改变“form-group”的表现形式，类似于网格系统的“row”。

按钮

class	说明
.btn	添加基本样式
.btn-default	默认/标准按钮
.btn-primary	原始按钮样式（未被操作）
.btn-success	表示成功的动作
.btn-info	用于要弹出信息的按钮
.btn-warning	需要谨慎操作的按钮
.btn-danger	危险动作的按钮操作
.btn-link	让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg	大按钮
.btn-sm	小按钮
.btn-xs	超小按钮
.btn-block	块级按钮(拉伸至父元素100%的宽度)
.active	按钮被点击
.disabled	禁用按钮

组件

Bootstrap组件是Bootstrap框架的核心之一
常用的组件：

Icon图标
下拉菜单
输入框
按钮

图标

小图标
图标（icon）是一个优秀网站不可缺少的一组元素，小图标的点缀可以使网站瞬间提升一个档次
Bootstrap给我们提供了250种小图标，这些小图标可以作用在内联元素上，给网页增加更多活力

Bootstrap官方组件地址

下拉菜单

类	描述
.dropdown	指定下拉菜单，下拉菜单都包裹在 .dropdown 里
.dropdown-menu	创建下拉菜单
.dropdown-menu-right	下拉菜单右对齐
.dropdown-header	下拉菜单中添加标题
.dropup	指定向上弹出的下拉菜单
.disabled	下拉菜单中的禁用项
.divider	下拉菜单中的分割线

<div class="dropdown open">   <!-- open控制菜单收缩展开-->
    <button class="btn btn-default" data-toggle="dropdown" >
        Dropdown   <span class="caret"></span>      <!-- 向下小三角-->
    </button>
    <ul class="dropdown-menu">
	  <li class="active"><a href="#">Action</a></li>  
        <li><a href="#">Another action</a></li>
        <li class="divider"></li>        <!-- 分界线-->
    </ul>
</div>

输入框

<div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" placeholder="Username">
</div>
<br/>
<div class="input-group">
    <input type="text" class="form-control" placeholder="请输入要搜索的内容" >
    <span class="input-group-addon" >百度一下</span>
</div>

按钮

<div class="input-group">
    <input type="text" class="form-control" placeholder="请输入要搜索的内容">
    <span class="input-group-btn">   <!-- 容易出错点：写成input-group-addon-->
        <button class="btn btn-primary" type="button">百度一下</button>
    </span>
</div>