前端BootStrap框架笔记总结

最新推荐文章于 2022-08-15 18:16:10 发布

Code_BinBin

最新推荐文章于 2022-08-15 18:16:10 发布

阅读量555

点赞数 8

分类专栏：前端知识文章标签： html css java bootstrap web

本文链接：https://blog.csdn.net/weixin_43145539/article/details/117339400

版权

本文详细介绍了BootStrap框架，包括环境搭建、容器、栅格系统、排版、表格、表单、按钮、图片、辅助类、字体图标、下拉菜单、按钮组、导航、分页、标签、徽章、巨幕、页头、警告框、列表组、面板、模态框、标签页和手风琴组件的使用方法和示例。

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

Boot Strap

笔记整理自b站up主：编程不良人

1.Boot Strap 的引言

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷

Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

2.Boot Strap 环境搭建

1.下载bootStrap 相关资料  说明:bootstrap第3.3.7版本
  https://v3.bootcss.com/getting-started/#download
  
2.下载完成之后解压bootstrap压缩包
   css 	 bootstrap核心css文件   bootstrap.css 核心css bootstarp.min.css(压缩css)
   fonts 用来存放bootstrap字体图标的文件夹
   js    bootstrap.js 是bootstrap核心js   bootstrap.min.js(压缩js)
    
3.将bootstrap文件夹全部放入项目中

4.页面使用bootstrap
   <meta name="viewport" content="width=device-width, initial-scale=1"> 移动设备优先
   <link rel="stylesheet" href="../boot/css/bootstrap.min.css">

3.Boot Strap 容器


<div class="container" style="border: 1px red solid;"></div>
注意: 两边留有一定宽度 padding

<div class="container-fluid" style="border: 1px blue solid;"></div>
注意: 占用页面的100宽度

注意: 两种容器类不能互相嵌套

4.Boot Strap 栅格系统

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

“行（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-* 不存在， 也影响大屏幕设备。

1.栅格系统分配
   注意: 无论屏幕尺寸多大在bootsrap中将其分为12份

2.栅格系统基本使用

  <div class="container-fulid">
       <div class="row">
           12column (.col-xs .col-sm(推荐) .col-md .col-lg)
      </div>
  </div>

3.栅格系统的分配(一个行12等份)
  <div class="row">
            <!--行最多12个列-->
            <div class="col-sm-1 aa">1</div>
            <div class="col-sm-1 aa">1</div>
            <div class="col-sm-1 aa">1</div>
            <div class="col-sm-1 aa">1</div>
            <div class="col-sm-1 aa">1</div>
            <div class="col-sm-1 aa">1</div>
            <div class="col-sm-1 aa">1</div>
            <div class="col-sm-1 aa">1</div>
            <div class="col-sm-1 aa">1</div>
            <div class="col-sm-1 aa">1</div>
            <div class="col-sm-1 aa">1</div>
            <div class="col-sm-1 aa">1</div>
   </div>
4.栅格系统的拆分
	<div class="row">
            <!--行最多12个列-->
            <div class="col-sm-4 aa">1</div>
            <div class="col-sm-4 aa">1</div>
            <div class="col-sm-4 aa">1</div>
    </div>

5.栅格系统嵌套
	<div class="row">
        <!--行最多12个列-->
        <div class="col-sm-2 aa">1</div>
        <div class="col-sm-8 aa">
            <div class="col-sm-10 bb">
                aaa
            </div>
            <div class="col-sm-2 bb">
                bb
            </div>
        </div>
        <div class="col-sm-2 aa">1</div>
    </div>

6.栅格系统列偏移 (.col-sm-offset)
 	<div class="row">
        <div class="col-sm-4 aa col-sm-offset-8">aaa</div>	
	</div>

7.栅格系统多余列
 	<div class="row">
        <!--占4份-->
        <div class="col-sm-4 aa">aaa</div>
        <!--占4份-->
        <div class="col-sm-4 aa">bbb</div>
        <!--超过另起一行-->
        <div class="col-sm-8 aa">bbb</div>
        <!--没有超过12等份 在同一行-->
        <div class="col-sm-4 aa">ccc</div>
	</div>

5.Boot Strap 排版

5.1 标题

	<h1>h1. Bootstrap heading</h1>
    <h2>h2. Bootstrap heading</h2>
    <h3>h3. Bootstrap heading</h3>
    <h4>h4. Bootstrap heading</h4>
    <h5>h5. Bootstrap heading</h5>
    <h6>h6. Bootstrap heading</h6>

    注意: 在bootstrap中默认h1标题的大小为36px   最小标题的字体12px

5.2 页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素
    
    1.使用可以直接在body标签中书写文字
    
    2.可以在<p>标签中书写文字和直接在body标签中书写文字样式一致
       <p>这是一个段落</p>
    
    3.突出显示
       <p class="lead">这是一个段落突出显示</p>

5.3 内联文本元素

1.使用<mark>标签高亮元素
    这是一个段落<mark>突出</mark>显示

5.4 被删除的文本

1.使用<del>标签让元素显示删除线
	小<del>黑小</del>明
    小<s>黑小</s>明

5.5 插入文本和带有下划线的文本

1.使用<ins>标签
     <ins>这是bootstrap相关的内容</ins>
2.使用<u>标签
     <u>这是bootstrap相关的内容</u>

5.6 小号文本

1.使用<small>标签完成字体小号展示 
     这是一个好<small>的课程</small>
     注意:使用 <small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%
    
2.副标题
    <h1>h1. Bootstrap heading<small>V2.0</small></h1>
    <h2>h2. Bootstrap heading<small>副标题</small></h2>
    <h3>h3. Bootstrap heading<small>副标题</small></h3>
    <h4>h4. Bootstrap heading<small>副标题</small></h4>
    <h5>h5. Bootstrap heading<small>副标题</small></h5>
    <h6>h6. Bootstrap heading<small>副标题</small></h6>

5.7 着重和斜体

1.使用<strong>标签着重展示
    小明是一个<strong>好人</strong>
    
2.使用<em>标签可以让包裹的文本变成斜体
    小明是一个<strong><em>好人</em></strong>

5.8 文本对齐方式

1.设置文本对齐方式
	<!--左对齐-->
    <p class="text-left">小黑</p>
    <!--右对齐-->
    <p class="text-right">小黑</p>
    <!--居中对齐-->
    <p class="text-center">小黑</p>
    <!--不换行-->
    <p class="text-nowrap">小黑</p>

5.9 改变大小写

1.设置转换大小写
	<p class="text-lowercase">LOwercased text.</p>
    <p class="text-uppercase">Uppercased text.</p>
    <p class="text-capitalize">Capitalized text boot.</p>   注意:这里是首字母大写

6.0 列表

1.无序列表
	<ul>
        <li>小明</li>
        <li>小黑</li>
    </ul>

2.有序列表
	<ol>
        <li>小黑</li>
        <li>小张</li>
    </ol>

3.无样式列表
	<ul class="list-unstyled">
        <li>小明
            <ul>  
                <li>二级</li>
                <li>二级</li>
            </ul>
        </li>
        <li>小黑</li>
    </ul>
	注意: list-unstyled 只能解决ul中一级列表没有样式 但是内部嵌套列表依然存在样式

4.内联列表(列表项一行展示)
	<ul class="list-inline">
        <li>看电视</li>
        <li>看书</li>
        <li>看报</li>
    </ul>
5.水平列表
	<dl class="dl-horizontal">
        <dt>小明明</dt>
        <dd>是一个非常好的人</dd>
        <dd>是一个非常好的人1</dd>
        <dd>是一个非常好的人2</dd>
        <dt>小嘿嘿</dt>
        <dd>是一个非常好的人</dd>
        <dd>是一个非常好的人1</dd>
        <dd>是一个非常好的人2</dd>
    </dl>

6.Boot Strap 表格

6.1 基本表格

基本样式表格.table 用来美化table控件
<table class="table">
  ...
</table>

6.2 条纹状表格(斑马线表格)

<table class="table table-striped">
  ...
</table>

6.3 带边框的表格

<table class="table table-bordered">
  ...
</table>

6.4 鼠标悬停表格(鼠标引入变色)

<table class="table table-hover">
  ...
</table>

6.5 紧缩表格

<table class="table table-condensed">
  ...
</table>

6.6 表格的状态类

1.提供的状态类

.active	    鼠标悬停在行或单元格上时所设置的颜色  灰色着重
.success	标识成功或积极的动作               浅绿色
.info	    标识普通的提示信息或动作            浅蓝色     
.warning	标识警告或需要用户注意             
.danger	    标识危险或潜在的带来负面影响的动作

2.在tr中使用
	<tr class="active">...</tr>
	<tr class="success">...</tr>
	<tr class="warning">...</tr>
	<tr class="danger">...</tr>
	<tr class="info">...</tr>
3.在td中使用  注意: 只有当前td的背景颜色发生变化
    <tr>
      <td class="active">...</td>
      <td class="success">...</td>
      <td class="warning">...</td>
      <td class="danger">...</td>
      <td class="info">...</td>
    </tr>

7.Boot Strap 表单

7.1 基本实例

使用方式:单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
    
1.基本实例
   <form action="">
         <div class="form-group">
             <label for="aa">用户名:</label>
             <input type="text" id="aa" name="name" class="form-control"/>
         </div>
         <div class="form-group">
             <label for="pwd">密码:</label>
             <input type="text" id="pwd" name="name" class="form-control"/>
         </div>

         <div class="form-group">
             <label for="exampleInputFile">请选择文件:</label>
             <input type="file" id="exampleInputFile">
             <p class="help-block">上传文件的大小不能超过2M!</p>
         </div>

         <div class="checkbox">
             <label>
                 <input type="checkbox"> 电视
             </label>
             <label>
                 <input type="checkbox"> 睡觉
             </label>
             <label>
                 <input type="checkbox"> 吃饭
             </label>
         </div>

         <select class="form-control">
             <option value="1">北京</option>
             <option value="2">南京</option>
             <option value="3">东京</option>
         </select>
    </form>

7.2 内联表单(一行展示表单控件)

<form action="" class="form-inline">
    <div class="form-group">
       <label for="aa">用户名:</label>
       <input type="text" id="aa" name="name" placeholder="输名." class="form-control"/>
    </div>
    <div class="form-group">
        <label for="pwd">密码:</label>
        <input type="text" id="pwd" name="name" class="form-control"/>
    </div>

    <input type="submit" value="登录"></input>
</form>

7.3 输入框组(定制input框)

<form action="" class="form-inline">
    <div class="form-group">
        <label for="name">请输入金额:</label>
        <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control" id="name">
            <div class="input-group-addon">.00</div>
        </div>
    </div>
</form>

7.4 水平排列表单 (必须和栅格系统连用)

<div class="container">
        <div class="row">
            <div class="col-sm-1"></div>
            <div class="col-sm-10">
                <form action="" class="form-horizontal">
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" id="name" class="form-control"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-sm-1"></div>
        </div>
</div>
具体使用方式见下图:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BXI7RQ2n-1622125258716)(C:\Users\HIAPAD\AppData\Roaming\Typora\typora-user-images\1552381474550.png)]

7.4 文本域

<textarea class="form-control" rows="10"></textarea>

7.5 复选框和单选扭

1.复选框|单选按钮水平排列
 	<div class="checkbox">
        <label>
            <input type="checkbox"> 看书
        </label>
        <label>
            <input type="checkbox"

最低0.47元/天解锁文章

Code_BinBin

关注

8
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
5
评论
前端BootStrap框架笔记总结

Boot Strap笔记整理自b站up主：编程不良人1.Boot Strap 的引言Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目Bootstrap 是最受欢迎的 HTM
复制链接

扫一扫