精华内容
下载资源
问答
  • bootstrap框架
    千次阅读
    2022-03-11 20:44:58

    一、Bootstrap简介

    Bootstrap来自推特,基于HTML、CSS和JavaScript,简洁灵活,使得web开发更加便捷。

    官网:
    Bootstrap中文网
    官网

    下载链接:
    当前版本: v3.4.1

    解压后文件夹中有以下三个文件👇
    在这里插入图片描述

    二、Bootstrap使用

    1.创建文件夹

    • 点击上文下载链接,下载bootstrap并解压;
    • 在项目中新建一个名为bootstrap的文件夹;
    • 将已经解压好的三个文件复制到我们创建的bootstrap文件夹中。

    在这里插入图片描述

    2.创建html骨架

    • 使用以下给出的这份超级简单的 HTML 模版,或者修改这些实例。
    • 可以对这些实例按照自己的需求进行修改,而不要简单的复制、粘贴。
    • 拷贝并粘贴下面给出的 HTML 代码,这就是一个最简单的 Bootstrap 页面了。
    <!doctype html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
        <title>Bootstrap 101 Template</title>
    
        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    
        <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
        <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
        <!--[if lt IE 9]>
          <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
          <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
        <h1>你好,世界!</h1>
    
        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
        <script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
      </body>
    </html>
    

    3.引入相关样式

    • 在head标签内使用link引入,即👇
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    
    • href="bootstrap/css/***** 可按需自选

    4.书写内容

    • 直接复制定义好的样式 :点击跳转组件
      例如:若要使用(首选项)这个蓝色按钮,就复制对应代码👇
    <button type="button" class="btn btn-primary">(首选项)Primary</button>
    

    在这里插入图片描述

    • 若想修改预定义好的样式,可以加一个类名,利用我们自己写的样式覆盖原先的样式。

    具体操作如下图👇在这里插入图片描述效果图下👇在这里插入图片描述

    更多相关内容
  • 5套H5+bootstrap框架写的后台管理模板
  • bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位的个人总结,具体详情如下所示: bootstrap框架 <!DOCTYPE html> <html lang="zh-cn"><!-- 语言设置 ...
  • bootstrap框架

    2018-07-11 11:54:18
    Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态...
  • bootstrap框架下带搜索功能的下拉树插件,在bootstrao-select和bootstrap-treeview的基础上实现(带演示模板可以直接使用)
  • Bootstrap框架

    千次阅读 2021-12-20 09:50:17
    Bootstrap框架 1.响应式开发 (1)响应式开发原理 响应式开发就是通过媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。 设备划分 尺寸区间 超小屏幕(手机) <= 768xp 小屏...

    Bootstrap框架


    1.响应式开发

    (1)响应式开发原理

    响应式开发就是通过媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。

    设备划分尺寸区间
    超小屏幕(手机)<= 768xp
    小屏设备(平板)768px ~ 992px
    中等屏幕(左面显示器)992px ~ 1200px
    宽屏设备(大桌面显示器)>= 1200px
    (2)响应式布局容器

    响应式需要一个父级容器作为布局容器,来配合子集元素来实现变化效果。

    在不同屏幕下,通过媒体查询来改变这个布局容器的大小,最后改变其中的子元素的排列方式和大小,实现不同的页面布局和样式变化。

    响应式尺寸划分:

    屏幕类型设置宽度
    超小屏幕(手机,小于768px)设置宽度为100%
    小屏幕(平板,大于等于768px)设置宽度为750px
    中等屏幕(桌面显示器,大于等于992px)宽度设置为970px
    大屏幕(大桌面显示器,大于等于1200px)宽度设置为1170px

    2.Bootstrap文件框架

    Bootstarp来自Twitter是目前最受欢迎的前端框架,基于html、css和javaScript其更为灵活,使得Web开发更加快捷。

    Bootstrap使用手册:https://getbootstrap.com/

    步骤
    step1:创建文件夹结构
    step2:创建html骨架结构
    step3:引入相关样式文件
    step4:书写页面内容

    在这里插入图片描述

    3.Bootstarp布局容器:

    注意:Bootstrp需要为页面内容和栅格系统包裹一个.containner容器,Bootstrap预先定义好了这个类。

    (1)container类:
    1. 响应式布局的容器(固定宽度)
    2. 大屏(>=1200px)宽度定为1170px
    3. 中屏(>=992px)宽度定为970px
    4. 小屏(>=768px)宽度定为750px
    5. 超小屏幕(100%)
    (2)container-fluid类:
    • 流式布局容器(百分百宽度)
    • 占据全部视口(viewport)的容器
    • 适合于单独做移动端开发

    4.Bootstrap栅格系统

    gridsystems网格系统,是指将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局

    (1)栅格系统使用:

    网格系统是通过一系列的行(row)与列(column)的组合来创建页面布局的,页面内容将被放在这些创建好的布局中。

    超小屏幕(手机<768px)小屏设备(平板>=768px)中等屏幕(>=992px)宽屏设备(>=1200px)
    .conntainer最大宽度自动100%750px970px1170px
    类前缀.col-xs-.col-sm-.col-md-.col-lg-
    列(column)总数12121212

    注意:

    1. 行(row)必须放到container布局容器里面
    2. 要实现列的平均划分需要给列添加类前缀
    3. 每一列默认有左右15像素的padding值
    4. 可以同时为一列指定多个设备类名,以便划分不同的份数。
    <!doctype html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--[if lt IE 9]>
          <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
          <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
        <![endif]-->
    	<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    	<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
    	<title>Bootstrap</title>
    	<style type="text/css">
    		* {
    			margin: 0;
    			padding: 0;
    		}
    		[class^="col"] {
    			border: 1px solid #ccc;
    		}
    		.container .row:nth-child(1) {
    			background-color: pink; col-sm-6
    		}
    	</style>
      </head>
      <body>
    	  <div class="container">
    		  <div class="row">
    			  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
    			  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
    			  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
    			  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
    		  </div>
    		  <!-- 如果孩子的份数相加等于12,则占满整个contanner -->
    		  <div class="row">
    			  <div class="col-lg-6">1</div>
    			  <div class="col-lg-2">2</div>
    			  <div class="col-lg-2">3</div>
    			  <div class="col-lg-2">4</div>
    		  </div>
    		  <!-- 如果孩子的份数相加小于12,则占不满整个contanner -->
    		  <!-- 如果孩子的份数相加大于12,则多余的份数会另起一行 -->
    	  </div>
      </body>
    </html>
    
    (2)栅格系统列嵌套:
    <!doctype html>
    <html lang="zh-CN">
    	<head>
    		<meta charset="utf-8">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<!--[if lt IE 9]>
    			<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    			<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    		<![endif]-->
    		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    		<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css" />
    		<title>列嵌套</title>
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    			}
    
    			[class^="col"] {
    				border: 1px solid #ccc;
    			}
    
    			.row>div {
    				height: 50px;
    				background-color: pink;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="container">
    			<div class="row">
    				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    					<!-- 注意:列嵌套最好添加一个row行,这样可以取消父元素的padding值(而且高度自动修改) -->
    					<div class="row">
    						<div class="col-md-6">a</div>
    						<div class="col-md-6">b</div>
    					</div>
    				</div>
    				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
    				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
    				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
    			</div>
    		</div>
    	</body>
    </html>
    

    在这里插入图片描述

    (3)栅格系统列偏移:

    使用.col-md-offset-*类可以将列向右侧偏移,这些类实际是通过使用*选择器为当前元素增加了左侧的边距(margin)。

    在这里插入图片描述

    <!doctype html>
    <html lang="zh-CN">
    	<head>
    		<meta charset="utf-8">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<!--[if lt IE 9]>
          <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
          <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
        <![endif]-->
    		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    		<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css" />
    		<title>列嵌套</title>
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    			}
    
    			[class^="col"] {
    				border: 1px solid #ccc;
    			}
    
    			.row div {
    				height: 50px;
    				background-color: pink;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="container">
    			<div class="row">
    				<div class="col-md-3">左侧</div>
    				<div class="col-md-3 col-md-offset-6">右侧</div>
    			</div>
    			<div class="row">
    				<div class="col-md-8 col-md-offset-2">中间盒子</div>
    			</div>
    		</div>
    	</body>
    </html>
    

    在这里插入图片描述

    注意:本质上为盒子做的偏移是在盒子的左侧添加上一个margin值

    (4)栅格系统列排序:

    通过使用.col-md-push-*.col-md-pull-*类就可以很容易的改变列(column)的顺序。

    在这里插入图片描述

    <!doctype html>
    <html lang="zh-CN">
    	<head>
    		<meta charset="utf-8">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<!--[if lt IE 9]>
          <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
          <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
        <![endif]-->
    		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    		<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css" />
    		<title>列排序</title>
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    			}
    
    			[class^="col"] {
    				border: 1px solid #ccc;
    			}
    
    			.row div {
    				height: 50px;
    				background-color: pink;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="container">
    			<div class="row">
    				<div class="col-md-4">左侧</div>
    				<div class="col-md-8">右侧</div>
    			</div>
    			<div class="row">
    				<div class="col-md-4 col-md-push-8">左侧</div>
    				<div class="col-md-8 col-md-pull-4">右侧</div>
    			</div>
    		</div>
    	</body>
    </html>
    

    在这里插入图片描述

    (5)栅格系统响应式工具:

    为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示 or 隐藏页面内容

    类名超小屏小屏中屏大屏
    .hidden-xs隐藏可见可见可见
    .hidden-sm可见隐藏可见可见
    .hidden-md可见可见隐藏可见
    .hidden-ld可见可见可见隐藏

    与之相反的是visible-xsvisible-smvisible-mdvisible-lg

    注意:具体的Bootstrap其他(按钮、表单、表格)请参考bootstrap文档。

    展开全文
  • 这是我对平时bootstrap使用练习的一个集合,欢迎下载,使用的时候一定要注意更改页面底部标签-_-
  • 使用Bootstrap框架,可灵活适应任意尺寸和分辨率的页面显示,如网站,平板或手机等。可将后台数据统计汇总成图表,折线等多样式展示,实现对数据的增删改查等功能。
  • 如何使用bootstrap?这篇文章就是告诉大家如何使用bootstrap框架,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 ...
  • 快速开始提供几个快速入门选项:克隆仓库: git clone https://github.com/vsn4ik/bootstrap-checkbox.git 使用 npm install bootstrap-checkbox : npm install bootstrap-checkbox 安装: yarn add bootstrap-...
  • Bootstrap框架;前端开发是创建Web页面或app等前端界面的过程。 前端开发通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。 熟悉掌握HTML、服务器端脚本语言、CSS...
  • bootstrap框架开发源码

    2018-09-04 13:21:57
    bootstrap框架开发源码,完整框架体系,明确的开发注解,适合初学者快速入门
  • bootstrap框架实例大全

    2018-10-16 18:11:15
    包含bootstrap完整的组件参考实例,让你的网页开发更快速!
  • 前端Bootstrap框架

    2018-08-20 10:42:41
    前端Bootstrap框架,非常好用,快来下载试用吧,版本3.3.7
  • Bootstrap框架来进行设计和开发,是目前国际上比较流行的一个趋势。很多软件公司在优化新产品时,因为其在js和控件上的综合优势,会选用这个开发框架。 Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,...
  • Bootstrap框架的快速使用

    千次阅读 2022-02-24 17:09:27
    Bootstrap框架使用Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。1 下载Bootstrap2 在项目中导入上面解压...前往bootstrap框架的官方文档处下载bootstrap官网 点进去后

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

    1 下载Bootstrap

    前往bootstrap框架的官方文档处下载bootstrap官网
    在这里插入图片描述

    点进去后选择【用于生产环境的 Bootstrap】
    在这里插入图片描述

    下载后解压:
    在这里插入图片描述
    解压后出现三个文件夹:
    在这里插入图片描述

    2 在项目中导入上面解压的三个文件夹【复制到项目中】

    在这里插入图片描述

    3 创建HTML文件,引入资源文件

    在bootstrap官网找到基本模板复制粘贴进行修改创建HTML文件
    在这里插入图片描述
    在这里插入图片描述
    这里还需要引入一个jQuery.min.js文件,js文件依赖于它,在jQuery官网再次下载jQuery官网 这里使用3.2.1版本
    在这里插入图片描述
    解压后再次将他导入到js文件下
    在这里插入图片描述

    在这里插入图片描述

    至此,基本模板创建完成,后续文件在此模板上进行增加,总结来说,主要引入了三个文件,css,bootstrap.js,jquery.js文件。
    在这里插入图片描述

    模板代码给出:

    <!doctype html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
        <title>Bootstrap 101 Template</title>
    
        <!-- Bootstrap -->
        <!--  引入CSS文件-->
        <link rel="stylesheet" href="/css/bootstrap.min.css"
              integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    
        <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
        <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
    <!--    &lt;!&ndash;[if lt IE 9]>-->
    <!--    <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>-->
    <!--    <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>-->
    <!--    <![endif]&ndash;&gt;-->
    
        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
        <script src="js/jquery-3.2.1.min.js"
                integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
                crossorigin="anonymous"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="js/bootstrap.min.js"
                integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
                crossorigin="anonymous"></script>
    </head>
    <body>
    <h1>你好,世界!</h1>
    </body>
    </html>
    

    4 Bootstrap框架使用

    Bootstrap使用借助官方文档:Bootstrap官方使用文档
    这里演示一个框架里面的组件:导航条
    在这里插入图片描述
    使用框架源码:

    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
    

    完整源码:

    <!doctype html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
        <title>Bootstrap 101 Template</title>
    
        <!-- Bootstrap -->
        <!--  引入CSS文件-->
        <link rel="stylesheet" href="css/bootstrap.min.css"
              integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    
        <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
        <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
        <!--    &lt;!&ndash;[if lt IE 9]>-->
        <!--    <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>-->
        <!--    <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>-->
        <!--    <![endif]&ndash;&gt;-->
    
        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
        <script src="js/jquery-3.2.1.min.js"
                integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
                crossorigin="anonymous"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="js/bootstrap.min.js"
                integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
                crossorigin="anonymous"></script>
    </head>
    <body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>
    
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    </body>
    </html>
    

    效果演示:
    在这里插入图片描述

    展开全文
  • 前端框架之:bootstrap框架基本使用 下载地址:https://v3.bootcss.com/getting-started/ Bootstrap框架版本: 2.x 3.x 4.x // 推荐使用3.x版本 相对稳定成熟 本质:使用框架调整页面样式其实就是操作标签的class...

    前端框架之:bootstrap框架基本使用

    下载地址:https://v3.bootcss.com/getting-started/

    Bootstrap框架版本:
    2.x 3.x 4.x // 推荐使用3.x版本 相对稳定成熟
    
    本质:使用框架调整页面样式其实就是操作标签的class属性

    补充:bootstrap需要依赖于jQuery才能正常执行(动态效果)


    压缩后文件解释:




    本地导入bootstrap框架方式(本地无需网络):


    外部CDN导入bootstrap框架方式(基于网络):




    该网站提供了非常多的样式,可以参考的一个一个的样式(CV)试一下,看一看效果.

    基本样式的使用:

    组件样式的使用:

    Font Awesome样式:http://www.fontawesome.com.cn/Font AwesomeCDN:https://www.bootcdn.cn/font-awesome/

    此网站专门提供体表库,完美兼容了bootstrap

    复制bootstrap实例:




    查看效果:

    其他框架:

    Element:https://element.eleme.io/#/zh-CN/component/layout

    二、前端常用UI框架

    1.Pure

    • 地址:http://purecss.org/layouts/
    • 描述:Pure精心设计,只为可以在任何Web项目中使用。为了例证这一点,我们制作了如下几个模板。这些模板都是响应式的,并且没有使用任何JavaScript。
    • 用途:真的是很精美的一个样式框架,便于我们快事构建一些个人产品,当然也可以服务于工作中的一些项目。

    2.bootstrap

    • 地址:http://www.bootcss.com/
    • 描述:简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。

    3.EasyUI

          easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。

          使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。

          easyui是个完美支持HTML5网页的完整框架。

          easyui节省您网页开发的时间和规模。

          easyui很简单但功能强大的。

    4.Ant Design

    • 地址:http://ant.design/
    • 描述:一个 UI 设计语言,一套提炼和应用于企业级后台产品的交互语言和视觉体系

    5. Layui

    layer是一款口碑极佳的web弹层组件,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。layui 首个版本发布于2016年秋,她区别于那些基于 MVVM 底层的 UI 框架,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。

    Layui官网地址:https://www.layui.com/

    6.ElementUI

    Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是Mint UI 。适合于Vue的UI框架;
    官网地址:http://element-cn.eleme.io/#/zh-CN

    7.Mint UI

    Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。
    官网地址:http://mint-ui.github.io/

    8.angular

    AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是MVW(Model-View-Whatever)、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
    官网地址:http://www.angularjs.net.cn/

    9.React

    React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图,在数据改变时 React 也可以高效地更新渲染界面。React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。
    官网地址:http://react-china.org/

    10.vue.js

    近几年最火的前端框架当属Vue.js了,Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。很多使用过vue的程序员这样评价它,“vue.js兼具angular.js和react.js的优点,并剔除了它们的缺点”。授予了这么高的评价的vue.js,也是开源世界华人的骄傲,因为它的作者是位中国人–尤雨溪
    几款常用的高质量web前端框架
    Web前端框架就是为了节约开发成本和时间,一般开发一个项目都会用到前端框架(除非自己有前端开发团队),根据我经验找的几款web前端框架做出了分析。都是个人意见,仁者见仁智者见智。

    展开全文
  • 引导程序-rtl 用于将 Bootstrap 框架的任何主题转换为从右到左布局 (RTL) 的附加文件。
  • 前端bootstrap框架项目一套,这是我半年web前端bootstrap框架的学习成果,好不好自己可以感觉到
  • 浅议bootstrap 框架优缺点

    千次阅读 2020-12-24 04:01:46
    韦建波 韦龙勇【摘 要】Bootstrap是近年来比较流行的前端开发框架,本文介绍了Bootstrap框架的发展历史和重要特性,分析了Bootstrap框架设计的优缺点,能对web前端开发人员带来一些参考借鉴作用。【关键词】...
  • bootstrap: 初次使用bootstrap框架

    千次阅读 2021-09-29 17:59:59
    JavaScript: 初次使用bootstrap框架 bootstrap官网:https://v3.bootcss.com/ jQuery官网:https://jquery.com/ 使用流程: 1、在浏览器中打开地址,点击下载Bootstrap 2、进入到下载界面,点击下载Bootstrap 3、...
  • 在最近两周,我学习了bootstrap前端开发框架来快速制作一个网页,以往自己用html,css等学习的网页知识来写一个网页,往往需要挺长的时间。这次用bootstrap写的这个demo...
  • Springmvc+bootStrap 框架PPT,写了两天,相信下载的人都看到后共同进步
  • Bootstrap框架安装使用简单介绍 下载 Bootstrap 可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。 Download Bootstrap:下载 Bootstrap。点击该按钮,您可以下载 Bootstrap CSS、JavaScript 和字体...
  • 一.bootstrap框架简介Bootstrap是最流行的前端开发框架。什么是框架:开发过程的半成品。bootstrap具有以下重要特性:(1)完整的CSS样式插件(2)丰富的预定义样式表(3)基于jQuery的插件集(4)灵活的栅格系统...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 127,647
精华内容 51,058
关键字:

bootstrap框架