BootStrap 前端框架

最新推荐文章于 2024-04-30 15:44:23 发布
最新推荐文章于 2024-04-30 15:44:23 发布
阅读量1.3k 收藏 12
点赞数
文章标签： 前端框架 bootstrap 前端 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58495313/article/details/122327324
版权

一、入门

BootStrap简介

BootStrap 是Twitter的工程师开发的前端框架，可以非常方便的设计出好看的页面效果。
本章演示一些基本元素 使用 Bootstrap和不用的区别

1、使用BootStrap和不用的区别

演示按钮 输入框 下拉框等常见的组件，在原生html和Bootstrap的效果比较
同时还演示了几种html中没有的效果

2、BootStrap如何使用

使用方法，   四个步骤

步骤1

<!DOCTYPE html>

因为bootstrap用到了html5的特性，为了正常使用，需要在最开头加上

<!DOCTYPE html>

代码比较复制代码

1

<!DOCTYPE html>

步骤2

导入js和css

Bootstrap需要JQuery才能正常工作，所以需要导入jquery.min.js
接着是 Bootstrap的css，里面定义了各种样式
最后是 Bootstrap的js，用于产生交互效果，比如关闭警告框
注：顺序不要搞错了，否则有一些效果会出不来。
首先是JQuery
然后是Bootstrap css
最后是Bootstrap js

<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>

步骤3

套用class

接着就是出现BootStrap的效果，使用是非常简单的，只需要套用 bootstrap css中定义的class即可。
如按钮，增加class btn btn-success 就能有bootstrap的效果了

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button class="btn btn-success">按钮</button>

步骤4

本地测试

首先在右侧下载bootstrap.rar
解压后和html放在同一个目录下
js和css的引用也如图所示

二、基本样式

BootStrap按钮

按钮样式 可以用于
按钮元素<button>
超链元素<a>
按钮类型的input元素 <input type="button">
提交类型的input元素 <input type="submit">
重置类型的input元素 <input type="reset">

按钮样式很多，只需要改变class的btn值即可

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn">原始样式按钮</button>

BootStrap表格

示例 1 : 基本表格   
示例 2 : 带斑马线的表格   
示例 3 : 带边框的表格   
示例 4 : 有鼠标悬停状态的表格   
示例 5 : 更加紧凑的表格   
示例 6 : 多种表格效果整合在一起   
示例 7 : 激活样式   
示例 8 : 成功样式   
示例 9 : 信息样式   
示例 10 : 警告样式   
示例 11 : 危险样式   
 

按钮样式很多，只需要改变class的table值即可

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<table class="table table-hover">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td> 
        <td>盖伦</td> 
        <td>616</td> 
     </tr>
 <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td> 
        <td>提莫</td> 
        <td>383</td> 
     </tr>
 <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td> 
        <td>阿卡丽</td> 
        <td>448</td> 
     </tr>
  </tbody>
</table>

图片

示例 1 : 圆角   
示例 2 : 圆形   
示例 3 : 缩略图   

按钮样式很多，只需要改变class的img值样式即可

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
  
<img src="https://how2j.cn/example.gif" class="img-rounded">

表单

对输入元素使用form-control 可以去除阴影，边框附带淡蓝色，输入状态更加柔和

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
   
<input type="text" class="form-control" value="文本框">
 
<br>
 
<input type="password" class="form-control" value="password">
<br>
<textarea  class="form-control">文本域</textarea>
<br>
<select class="form-control">
   <option>Java</option>
   <option>Html</option>
   <option>IOS</option>
</select>

BootStrap文本

示例 1 : 淡灰色文本   
示例 2 : 强调的文本   
示例 3 : 操作成功文本   
示例 4 : 提示信息文本   
示例 5 : 警告文本   
示例 6 : 危险操作文本   

 <!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<span class="text-muted">muted</span>//淡灰色文本

BootStrap背景

示例 1 : 强调的背景   
示例 2 : 成功操作文字的背景   
示例 3 : 信息提示文字的背景   
示例 4 : 警告提示文字的背景   
示例 5 : 危险提示文字的背景   

 <!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
  
<p class="bg-primary">强调</p>

BootStrap其他

示例 1 : 关闭按钮   
示例 2 : 下拉菜单的按钮   
示例 3 : 左浮动   
示例 4 : 右浮动   
示例 5 : 显示   
示例 6 : 隐藏   
示例 7 : 隐藏   

 <!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
   
   <button type="button" class="close" aria-hidden="true">
      &times;
   </button>

BootStrap 删格布局

步骤 1 : 栅格系统   
步骤 2 : 一半，1/3， 1/4   
步骤 3 : 自动换行   

1、栅格系统

运用Bootstrap的栅格系统，可以做出像table那样定义多少行，多少列效果，但是又比table灵活。
运用Bootstrap的栅格系统，首选需要准备一个class=container的div
紧接着需要一个class=row的 div，表示行
再挨着的div，就是列了。

Bootstrap的栅格系统会默认把一行，分成12列。进而设置列col-xs-值就可以了，超过12就会自动换行

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link
    href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css"
    rel="stylesheet">
<script
    src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<style>
   
div.container div.row div {
    margin:5px 0px;
     
}
div.container div.row div {
    background-color: lightgray;
    border: 1px solid gray;
    text-align:center;
}
</style>
 
<div class="container">
    <div class="row">
        <div class="col-xs-12 ">一共12列</div>
    </div>
</div>
 
<div class="container">
    <div class="row">
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-xs-4 ">占4列</div>
        <div class="col-xs-4 ">占4列</div>
        <div class="col-xs-4 ">占4列</div>
    </div>
</div> 

三、组件 

BootStrap字体图标

Bootstrap提供了总共263种字体图标 可以满足大部分的图标需求

为了能够正常使用bootstrap.min.css文件的上一级目录必须要有 fonts 目录，并且里面有，不能够缺失

示例 1 : 一个字体图标   

使用class: glyphicon glyphicon-asterisk


示例 2 : 字体图标设置颜色   

加一个文本类 text-success


示例 3 : 字体图标上加超链   

在span外面套一个a标签

<a href="#nowhere">

<span class="glyphicon glyphicon-asterisk"></span> 连接

</a>

示例 4 : 在button上使用字体图标   

在span外面套一个button标签
 

<button class="btn btn-primary btn">

<span class="glyphicon glyphicon-asterisk"></span> 按钮

</button>

示例 5 : 所有的字体图标   

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
    
<span class="glyphicon glyphicon-asterisk   text-success" ></span>

 <!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
     
<button class="btn btn-primary btn-xs">
  <span class="glyphicon glyphicon-asterisk">最小按钮</span> 
</button>
<button class="btn btn-primary btn">
  <span class="glyphicon glyphicon-asterisk"></span> 按钮
</button>

所有的字体图标

BootStrap下拉菜单

示例 1 : 下拉菜单   

菜单div

<div class="dropdown">


下拉按钮，id用来给下拉菜单指向用的

<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">


菜单列表，aria-labelledby="dropdownMenu1" 就是用来指向哪个菜单，因为有可能有多个菜单

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">


菜单项

<li><a href="#">HTML</a></li>

示例 2 : 标题不可点击   

标题不可点击
<li role="presentation" class="dropdown-header">Dropdown header</li>


示例 3 : 分割线   

菜单分割线
<li role="presentation" class="divider"></li>


示例 4 : 禁用项   

禁用的菜单项
<li role="presentation"class="disabled"> 

<a role="menuitem" tabindex="-1" href="#">Bootstrap(开发中)</a>

</li>

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
      http://192.168.1.189
      <span class="caret"></span>         
    </button>
     
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
 
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div>   
 
<div style="height:100px"></div>

BootStrap 按钮组

示例 1 : 按钮组   

<div class="btn-group" role="group"
最低0.47元/天 解锁文章
楠丝木
关注
  • 0
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap前端框架1
08-08
【Bootstrap前端框架1】 Bootstrap 是一个流行的开源前端框架，它为开发者提供了丰富的组件和样式，以便快速构建响应式和移动设备优先的网站。Bootstrap 的核心特性包括网格系统、排版、表格、表单、按钮、图像、...
Bootstrap框架最新V5 快速入门&直通
最新发布
qingwan_91的博客
06-03 1297
一篇文章直通Bootstrap
BootStrap使用
lmz的博客
12-20 3511
BootStrap使用
BootStrap的使用（图文详解）
m0_46396424的博客
08-30 2万+
BootStrap的使用 ​ Bootstrap使用四步曲：1、创建文件夹；2、创建html骨架结构；3、引入相关样式文件；4、书写内容 一、创建文件夹结构 1、创建文件夹 ​ 按照以往的习惯创建文件夹。 2、下载Bootstrap ​ 在官网下载压缩包，选择下载生产环境的压缩包，将其解压到项目目录下，但是不能覆盖你自己建的文件夹。 二、创建html骨架结构 ​ 先正常搭建一个html页面，然后再选中“基础模板”中的所需代码，复制到你自己搭建的html页面中。 三、引入相关样式文件 ​ 使用lin
bootstrap排版样式
杨哥的博客
06-08 3759
一．页面排版 Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。 1.页面主体 Bootstrap 将全局 font-size 设置为 14px，line-height 行高设置为 1.428(即20px)；段落元素被设置等于 1/2 行高(即 10px)；颜色被设置为#333。 //创建包含段落突出的文本 Bootstrap 框架 Bootstrap 框架
BootStrap基本使用
m0_60027772的博客
09-18 2万+
html超文本标记语言，多出来的html为超文本标记语言，是一种标识性语言css为层叠样式表css为层叠样式表，为前端三剑客之一
Bootstrap教程——快速上手（最给力的前端框架）
只想AC的博客
06-03 5164
Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码
bootstrap前端框架
09-22
bootstrap 前端框架 css框架 bootstrap 前端框架 css框架 bootstrap 前端框架 css框架 bootstrap 前端框架 css框架 bootstrap 前端框架 css框架 bootstrap 前端框架 css框架 bootstrap 前端框架 css框架 bootstrap ...
Bootstrap前端框架 4.3.1
09-30
Bootstrap是最受欢迎的HTML、CSS和JS的前端开发框架，用于开发响应式布局、移动设备优先的WEB项目。它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式。 Bootstrap 4.3.1 更新日志
Bootstrap(前端开发框架)
qq_64001795的博客
05-07 8130
目录 前端框架的理解 一、3个WWW 1、what？是什么 2、why？为什么使用 3、where？使用领域 二、环境安装 1、下载Bootstrap库 2、页面中引入库 三、案例 以网上书城为例 案例1：查询按钮原生态实现对比Bootstrap方式实现 案例2：演示Bootstrap页面在手机浏览器中展示效果 案例3：首页导航&搜索区域原生态实现（div+css） 案例4：首页导航&搜索区域Bootstrap实现&搭首页框架 前端框架的理解...
bootstrap基础
qq_46670673的博客
04-21 956
bootstrap 基础 学习目标 1.熟练掌握栅格系统 2.熟练掌握bootstrap常见组件 一、bootstrap概述 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 相关案例 bootstrap特点： html 5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。 移动设备优先 Bootstrap 是移动
Bootstrap前段框架（一篇到底）
让优秀成为一种习惯！
04-02 3344
概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架注意： 不适用于过于复杂的电商网站下载Bootstrap库 ：点击进入进入网址点击下载Bootstrap 三个均可下载，使用下载生产文件和源码 如：解压后打开dist文件夹 导入js文件 1-后缀.js为开发版本（需要改源代码用） 2-后缀为 .min.js为生产版本导入css文件 添加到body标签结束之前 为什么CSS要放在前面 ？ 如演示： 通过Bootstrap实现的按钮演示以及固定容器会
Bootstrap的基本使用方法，5分钟帮你搞懂怎么用
热门推荐
当代码遇上音乐
03-28 5万+
作为Web开发的Coder，是不是很对浏览器兼容性，各种移动设备适配都很头大，所以我们有必要学习一下当下主流的一个Html5框架，即Bootstrap！
前端必知：36.如何使用bootstrap框架
qq_52799985的博客
08-02 1873
Bootstrap框架是一个功能强大而易于使用的工具，能够帮助开发者快速构建现代化的网站和应用程序。它提供了响应式设计、预定义样式和组件、浏览器兼容性、定制主题以及集成的JavaScript插件等功能。通过使用Bootstrap，你可以节省大量的开发时间，同时确保你的网站在不同设备上获得出色的显示效果。希望通过本文的介绍，你对Bootstrap框架有了更深入的了解，并能够在你的项目中充分利用它的优势。Bootstrap提供了丰富的预定义样式和组件，使得网站的开发变得轻松。
Bootstrap的使用
weixin_73200795的博客
07-23 488
栅格系统是通过一系列的行（row）与列（column）的组合来创建页面布局，设置的内容可以放入这些创建好的布局中。
Bootstrap 插件-可切换导航栏
litengbin的博客
01-21 1258
可切换导航栏 p{ margin-left:10px; margin-top:10px; } DotA 英雄联盟 <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="drop
BootStrap前端框架
Skf_0004010的博客
11-04 5132
BootStrap 1、Bootstrap介绍 什么是bootstrap? 简单，直观，强悍的前端开发框架，让web开发更迅速，简单。来自Twitter，是目前很受欢迎的前端框架之一。 Bootstrap是基于HTML,CSS,Javascript的 特点 移动端设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式 响应式设计：采用栅格布局（底层实现原理：媒体查询结合流体布局） 偏UI，综合框架，包含一些常用的UI组件以及一些JS组件 Bootstrap的适用场景？ b
前端框架---Bootstrap的使用
m0_74249162的博客
04-30 1307
Bootstrap是一个来自Twitter的前端开发框架，它基于HTML、CSS和JavaScript，以其简洁灵活的特性使得Web开发更加快捷。基本结构网格系统：Bootstrap使用12列网格布局，可以快速构建响应式布局。通过添加class到HTML元素上，可以指定元素在不同屏幕宽度下的列数和偏移量。CSS样式：Bootstrap包含了大量的预设CSS样式，如排版、颜色、按钮、表单等，可以快速地为网页添加统一的样式。JavaScript插件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值