Bootstrap初学笔记

最新推荐文章于 2022-12-13 10:53:48 发布
最新推荐文章于 2022-12-13 10:53:48 发布
阅读量213 收藏 3
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42825732/article/details/103375320
版权

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

所以为了最近的期末大作业，学习记录一下  Bootstrap 框架的学习。

同时直接用的bootstrap的链接文档，所以不需要下载包也能使用.

bootstrap官网：https://getbootstrap.com/

学习视频（这个讲的蛮好的）：https://biaoyansu.com/14.x 

一.表单学习


<!DOCTYPE html> 
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<html> 
    <head>
    	<meta charset = "UTF-8"> 
    	<title> 注册界面 </title>
    </head>
    <body> 
    	<!--使用container来保证输入div框不会无限延长-->
    	<form class="container">
    		<h1>注册用户信息</h1>
    		<!--div form-group :基本表单组 -->
    		<div class="form-group" >
    			<label>用户名</label>
    			<!--输入部分使用 form-control -->
    			<input type="text" class="form-control">
    		</div>
    		<div class="form-group">
    			<label>密码</label>
    			<input type="password" class="form-control">
  			</div>
  			<div class="form-group">
    			<label>再次输入密码</label>
    			<input type="password" class="form-control">
  			</div>

  			<!--在input-group中添加input-group-addon制作框内头部显示效果-->
  			<div class="form-group">
    			<label>初始工资</label>
    			<div class="input-group">
    				<div class="input-group-addon">￥</div>
    				<input type="text" class="form-control"> 
    			</div>
  			</div>

  			<!--关于按钮的常见四种模式 primary,default,danger,info-->
  			<!--大小设置 btn-lg,sm,xm -->
  			<!--占页面的整个宽度 btn-block -->
  			
  			<div class="">
  				<input type="submit" value="注册" class="btn btn-default">
  				<!-- input type="button" value="注册" class="btn btn-default" 效果不相同 -->
  				<!--链接跳转形式 <a herf ="url" class="btn bt-danger" type="submit" value="注册"> -->
  			</div>

    	</form>
    </body> 
</html>

二、导航栏

(1)本网页导航

<!DOCTYPE html> 
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
<html> 
    <head>
        <meta charset = "UTF-8"> 
        <title> </title>
    </head>
    <body> 
    	<!--本页导航标签-->
    	<ul class="nav nav-tabs">
    		<li class="active"><a href="#">前言</a></li>
    		<li><a href="#">制作信息</a></li>
    		<li><a href="#">制作人员</a></li>
    	</ul>

    	<div>
    		<h1>登录</h1>
    		<p>collect2.exe: error: ld returned 1 exit status</p>
    	</div>
    	<br>
    	<br>
    	<br>
    	<div class="col-sm-1">
    	<!-- nav-stacked 竖向排列(侧栏) -->
	    	<ul class="nav nav-pills nav-stacked">
	    		<li class="active"><a href="#">前言</a></li>
	    		<li><a href="#">制作信息</a></li>
	    		<li><a href="#">制作人员</a></li>
	    	</ul>
    	</div>
    	<div>
	    	<h1>登录</h1>
	    	<p>collect2.exe: error: ld returned 1 exit status</p>
	    </div>
    </body> 
</html>

(2)整个网站导航

三、表格学习

<!DOCTYPE html> 
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
<html> 
    <head>
        <meta charset = "UTF-8"> 
        <title> </title>
    </head>
    <body> 
    	<!--table-striped 灰白相间的形式 -->
    	<!--table-hover 鼠标指到哪一行就高亮 -->
    	<table class="table table-hover table-bordered">
    		<thread>
    			<tr>
    				<th>姓名</th>
    				<th>职位</th>
    				<th>入职时间</th>
    			</tr>
    		</thread>
    		<tbody>
    			<!-- 添加颜色 -->
    			<tr class="success">
    				<td>小薇薇</td>
    				<td>管理员</td>
    				<td>2019-01-01</td>
    			</tr>
    			<tr class="warning">
    				<td>小薇薇</td>
    				<td>管理员</td>
    				<td>2019-01-01</td>
    			</tr>
    			<tr class="danger">
    				<td>小薇薇</td>
    				<td>管理员</td>
    				<td>2019-01-01</td>
    			</tr>
    		</tbody>
    	</table>
    </body> 
</html>

利用bootstrap的css制作一个简单的注册界面(表单)

效果图：

 <!DOCTYPE html> 
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<!--覆写表单style:
  padding:设置边框内边距
  margin:设置外边距
-->
<style type="text/css">
	body{
		padding: 0;
		margin: 0 auto;
	}
	.container{
		width: 300px;
		height:  800px;
		margin: 20px auto;
		padding: 50px 0;
	}
	#footer {
		height: 40px;
		line-height: 40px;
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;
		background: #333;
		color: #fff;
		font-family: Arial;
		font-size: 12px;
		letter-spacing: 1px;
	}
	.content {
		height: 1800px;
		width: 100%;
		text-align: center;
	}
	.text-center{
	/*使用text-align来居中靠右靠左*/
		text-align:center;
	}
</style>
<html> 
    <head>
      <meta charset = "UTF-8"> 
      <title> 注册界面 </title>
    </head>
    <body> 
      <!--使用container来保证输入div框不会无限延长-->
      <form class="container">
		<div style="text-align:center">
        <h1>用户注册</h1>
		</div>
        <!--div form-group :基本表单组 -->
        <div class="form-group" >
          <label>用户名</label>
          <!--输入部分使用 form-control -->
          <input type="text" class="form-control" placeholder="请输入用户名">
        </div>
        <div class="form-group">
          <label>密码</label>
          <input type="password" class="form-control" placeholder="请输入密码">
        </div>
        <div class="form-group">
          <label>再次输入密码</label>
          <input type="password" class="form-control" placeholder="再次输入密码">
        </div>
 
        <!--在input-group中添加input-group-addon制作框内头部显示效果-->
        <div class="form-group">
          <label>输入手机号</label>
          <div class="input-group">
            <input type="text" class="form-control" placeholder="请输入手机号"> 
             <span class="input-group-btn">
              <button class="btn btn-default" type="button">获取验证码</button>
              </span>
            </div>
          </div>
        </div>

        <div class="form-group">
          <label>输入验证码</label>
          <input type="password" class="form-control" placeholder="请输入验证码">
        </div>
		
		<div class="btn-group btn-group-justified" role="group" aria-label="...">
			<div class="btn-group" role="group">
				<input type="submit" value="注册" class="btn btn-default " >
			</div>
			<div class="btn-group" role="group">
				<input type="reset" value="重置"  class="btn btn-default" >
			</div>
			<div class="btn-group" role="group">
				<button type="submit" id="btn" οnclick="btn()"  class="btn btn-default" >找回密码</button>
			</div>
		</div>
        <!--关于按钮的常见四种模式 primary,default,danger,info-->
        <!--大小设置 btn-lg,sm,xm -->
        <!--占页面的整个宽度 btn-block -->
        <!-- input type="button" value="注册" class="btn btn-default" 效果不相同 -->
        <!--链接跳转形式 <a herf ="url" class="btn bt-danger" type="submit" value="注册"> -->
		</form>
		<div id="footer">Copyright&nbsp;&copy;&nbsp;2018&nbsp;-&nbsp;2020&nbsp;Tianwell.</div>
    </body> 
</html>

 

Tianwell
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
大学生bootstrap框架网页作业成品 web前端大作业期末源码 航海王html+jquery+bootstrap响应式网页制作模板 学生海贼王动漫bootstrap框架网站作品
qq_38514511的博客
03-28 2067
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
李炎恢Bootstrap讲义笔记
04-26
李炎恢Bootstrap讲义笔记，内容详实，适合初学者快速掌握bootstrap
Bootstrap期末作品
12-18
整体运用了栅格系统布局，局部应用了固定到顶部的导航栏组件，下拉菜单组件，轮播图插件，以及Bootstrap自带的按钮样式。希望通过学习Bootstrap从这种布局的思想，实现的方式中加深对CSS html 的理解
web前端期末大作业——基于Bootstrap响应式汽车经销商4S店官网21页
网页设计与制作 | HTML+CSS+JS
12-13 505
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🚗汽车网站、🚘汽车介绍、🚍汽车官网、汽车租赁、企业网页 、等网站的设计与制作。🏷️ 此作品为学生汽车网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常
Web前端开发技术课程大作业: 关于美食的HTML网页设计——HTML+CSS+JavaScript在线美食订餐网站html模板源码30个页面:
HTML网页设计
07-30 1万+
👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。 🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🧡 【作者主页——🔥获取更多优质源码】 🧡 【...
bootstrap学习笔记-html5
12-22
bootstrap学习笔记-html5 各类简单案例，适合初学者
bootstrap课堂笔记代码
01-31
适合初学者的web前端必会技能---响应式布局笔记代码。
bootstrap4学习笔记（一）
02-08
bootstrap4学习笔记，中文的，适用于初学者学习，知识点配合案例的。
第一次记录Bootstrap table学习笔记（1）
08-30
Bootstrap Table 是一个基于 Bootstrap 框架的...希望这篇笔记能帮助初学者更好地理解和应用 Bootstrap Table。在后续的学习中，你还可以探索更多高级特性，如行内编辑、导出数据、固定列等，以满足不同的开发需求。
快速前端开发期末项目bootstrap
07-18
快速前端开发期末项目bootstrap
一份bootstrap框架期末作业，请注意查收
06-17
这是我对平时bootstrap使用练习的一个集合，欢迎下载，使用的时候一定要注意更改页面底部标签-_-
SSM期末大作业
03-17
这是一个SSM期末课程设计大作业。使用ssm技术+bootstrap快速搭建简洁美观的页面；希望可以帮助到大家，喜欢的请动动小手，点个赞。么么哒
一份Bootstrap框架的期末作业
06-17
这是我对平时bootstrap使用练习的一个集合，欢迎下载，使用的时候一定要注意更改页面底部标签-_-
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 6万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
大一学生HTML个人网页作业作品——火影忍者动漫7页面带特效带轮播(HTML+CSS+JavaScript)
VX_WJ88950106的博客
08-16 412
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。......
Web前端期末大作业-绿色实验楼bootstrap响应式教育模板
weixin_19164791635
12-07 1555
????作者：计算机编程-吉哥 ????简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 ????心愿：点赞 ???? 收藏 ⭐评论???? ????文末获取源码联系 效果展示： 部分代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name
bootstrap学习笔记
最新发布
05-28
以下是一些 Bootstrap 学习笔记： 1. 开始使用 Bootstrap 要开始使用 Bootstrap，你需要在你的 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件。你可以在 Bootstrap 的官方网站上下载这些文件，或者通过 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值