bootstrap用法示例

最新推荐文章于 2022-11-21 18:36:03 发布

千禧河畔

最新推荐文章于 2022-11-21 18:36:03 发布

阅读量276

点赞数

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

本文链接：https://blog.csdn.net/m0_67820396/article/details/126079685

版权

本文详细介绍了Bootstrap的使用，包括顶层容器、栅格布局、标题段落样式、表格样式、代码样式、表单控件以及各种按钮的创建。通过实例展示了Bootstrap如何实现响应式网页设计，提供了一种快速开发美观界面的方法。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../js/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--笔记
1.顶层容器：.container     与浏览器两边有一定的边距
          .container-fluid 与浏览器两边没有边距
2.栅栏网格布局
偏移（不覆盖）
col-md-offset-1
col-md-数字（小于等于12）
 col-md-push-1  偏移（覆盖）
 <div class="row">//每行分成12份
        <div class="col-md-1" style="background-color: #985f0d">1</div>
        <div class="col-md-4" style="background-color: #1b6d85">4</div>
        <div class="col-md-1 col-md-offset-1" style="background-color: red">1</div>
        <div class="col-md-5" style="background-color: pink">6</div>
    </div>

3.标题段落样式   .lead       标题会更加美观
               .text-primary  段落主样式（字体样式会变好看）
               .text-warning
               .text-success等等

                <pre></pre>会出现一个矩形div
4.表格样式       .table主样式    .table-bordered边框  table-striped斑马色 table-hover停留效果
5.代码样式 <kbd>crtl</kbd>快捷键样式
         <scope><scope/>
6.表单控件：
       6.1文本框：.form-control表单元素样式
                 .input-sm表单控件大小
       6.2下拉框：.form-control表单元素样式
                  multiple="multiple"多选
       6.3文本域：  .form-control表单元素样式
       6.4复选框:.checkbox垂直
                .checkbox-inline水平
       6.5单选框:.radio垂直
           .radio-inline水平
7.按钮   .btn基本样式
        .btn-danger红色按钮（删除）
        .btn-success（注册登陆）
        .btn-warning（橙色）
        .btn-info（注册登陆）等
        .btn-lg大按钮
        .btn-sm正常按钮
        .btn-xs小按钮
        属性disabled="disabled"，彻底禁用按钮
        .disabled假禁用，样式改变