HTML CSS JAVASCRIPT 学习周记 第四周

最新推荐文章于 2024-06-10 17:18:33 发布
最新推荐文章于 2024-06-10 17:18:33 发布
阅读量159 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Catsdoge/article/details/115213621
版权

HTML CSS JAVASCRIPT 学习周记 第四周

Bootstrap

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。是基于 HTML、CSS、JAVASCRIPT 的。

Bootstrap 的网格系统
核心代码展示

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

Bootstrap 网格系统（Grid System）的工作原理 网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了
Bootstrap 网格系统是如何工作的：

行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。 内容应该放置在列内，且唯有列可以是行的直接子元素。 预定义的网格类，比如 .row 和
.col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows
上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

Bootstrap 导航栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 实例 - 默认的导航栏</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid">
	<div class="navbar-header">
		<a class="navbar-brand" href="#">菜鸟教程</a>
	</div>
	<div>
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">iOS</a></li>
			<li><a href="#">SVN</a></li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					Java
					<b class="caret"></b>
				</a>
				<ul class="dropdown-menu">
					<li><a href="#">jmeter</a></li>
					<li><a href="#">EJB</a></li>
					<li><a href="#">Jasper Report</a></li>
					<li class="divider"></li>
					<li><a href="#">分离的链接</a></li>
					<li class="divider"></li>
					<li><a href="#">另一个分离的链接</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>
</nav>

</body>
</html>
Bootstrap 实例 - 默认的导航栏

Bootstrap 页面标题

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
    <title>Bootstrap 实例 - 页面标题</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="page-header">
    <h1>页面标题实例
        <small>子标题</small>
    </h1>
</div>
<p>这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。</p>

</body>
</html>

页面标题实例 子标题

这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。

Bootstrap 多媒体对象

```html
<!-- 左对齐 -->
<div class="media">
  <div class="media-left">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">左对齐</h4>
    <p>这是一些示例文本...</p>
  </div>
</div>
 
<!-- 右对齐 -->
<div class="media">
  <div class="media-body">
    <h4 class="media-heading">左对齐</h4>
    <p>这是一些示例文本...</p>
  </div>
  <div class="media-right">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
```
猫猫狗狗www
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第六周学习周记——JavaScript学习
weixin_54826115的博客
04-13 250
JavaScript学习 1.switch语句 switch 语句用来执行多个不同条件的动作。 switch语句的语法： switch(n) { case 1: 需要执行的代码块 1 break; case 2: 需要执行的代码块 2 break; default: 当 n都不是1 和 2时执行的代码 } 当然，当switch语句中含有这样的语句时： case 2: case 3： 需要执行的代码块x break; 当n为2或3时，都会执行需要执行的代码块x。 例： <html> <he
第六周学习周记——学习JavaScript
jix_Hu的博客
04-24 763
第六周学习周记前言一、JavaScript简介二、JavaScript用法三、JavaScript语法1. JavaScript字面量2. JavaScript变量3. JavaScript操作符4. JavaScript关键字5. JavaScript数据类型四、JavaScript对象五、JavaScript函数六、JavaScript事件总结 前言 在上一周学习了BootStrap后，这一周将学习新的知识：JavaScript。 一、JavaScript简介 JavaScript是一种直译式脚本语
JavaScript 使用 · 每日笔记（3）
Mr_Duoduo的博客
07-22 331
知识点来源：w3school 1.<script> 标签 在 HTML 中，JavaScript 代码必须位于<script>与</script>标签之间。 实例 <script> document.getElementById("demo").innerHTML = "我的第一段 JavaScript"; </script&...
第七周学习周记——JavaScript学习
weixin_54826115的博客
04-18 220
JavaScript学习… 1.for循环语句 for…in循环 我们可以使用for…in 语句去循环遍历对象的属性。 for…in语句的语法： for (variable in object) { 需要执行的代码块 } 每个属性都将执行一次需要执行的代码块。 2.while循环语句 只要当指定条件是真时，while循环语句会一直循环执行需要执行的代码块。 ...
学习周记5——学习JavaScript
qq_48999927的博客
04-06 171
JavaScript简介 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 改变 HTML 图像 点亮灯泡实例 <script> function changeImage() { element=document.getElementById('myimage') if (element.src.match("bulbon")) { element.src="/images/pic_bulboff.g
HTML CSS JAVASCRIPT 学习周记 第十四周
Catsdoge的博客
06-17 116
HTML CSS JAVASCRIPT 学习周记 第十四周 Vue.js 组件 - 自定义事件 父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.
HTML CSS JAVASCRIPT 学习周记 第十三周
Catsdoge的博客
05-27 110
HTML CSS JAVASCRIPT 学习周记 第十三周 实验1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script&g
html css JavaScript 学习留下的代码.zip
12-30
html css JavaScript 学习留下的代码html css JavaScript 学习留下的代码 html css JavaScript 学习留下的代码html css JavaScript 学习留下的代码 html css JavaScript 学习留下的代码html css JavaScript 学习留下...
HTML+CSS+JavaScript学习练手.zip
01-01
HTML+CSS+JavaScript学习练手HTML+CSS+JavaScript学习练手 HTML+CSS+JavaScript学习练手HTML+CSS+JavaScript学习练手 HTML+CSS+JavaScript学习练手HTML+CSS+JavaScript学习练手 HTML+CSS+JavaScript学习练手...
HTML CSS javaScript 学习Demo集合, 适合0基础入门.zip
12-30
HTML CSS javaScript 学习Demo集合, 适合0基础入门 HTML CSS javaScript 学习Demo集合, 适合0基础入门 HTML CSS javaScript 学习Demo集合, 适合0基础入门 HTML CSS javaScript 学习Demo集合, 适合0基础入门 HTML CSS...
学习 html,css,javascript.zip
01-05
学习 html,css,javascript学习 html,css,javascript学习 html,css,javascript 学习 html,css,javascript学习 html,css,javascript学习 html,css,javascript 学习 html,css,javascript学习 html,css,javascript学习 ...
html+css+JavaScript的学习代码.zip
01-01
html+css+JavaScript的学习代码html+css+JavaScript的学习代码 html+css+JavaScript的学习代码html+css+JavaScript的学习代码 html+css+JavaScript的学习代码html+css+JavaScript的学习代码 html+css+JavaScript的...
JavaScript学习总结（四）
郑哥哥の博客
05-13 293
JavaScript学习总结（四） 自去年6月份放假以后，一直没有再接触JavaScript，忙着考研初试、复试、打寒假工、写毕业设计，一直不停地搁置了，研究生生活也过了一个学期了，又开始把JavaScript捡起来，希望能有所长进吧。 今天从JavaScript的类型转换开始学习！ 类型转换，指的是将“一种数据类型”转换为“另外一种数据类型”。在JavaScript中，共有2种类型转换。 （1）隐式类型转换 （2）显式类型转换 隐式类型转换，指的是JavaScript自动进行的类型转换。显式类型转换，
6.21周记（JAVASCRIPT）
kaiakai111的博客
06-21 318
JavaScript 1.JavaScript 使用 在 HTML 中，JavaScript 代码必须位于 标签之间。 外部引入JS文件通过完整的 URL 或相对于当前网页的路径引用外部脚本。如< script src=“myScript.js”></ script> 2.JavaScript变量 变量的标识符：标识符可以是短名称（比如 x 和 y），或者更具描述性的名称（age、sum、totalVolume）。构造变量名称（唯一标识符）的通用规则是：名称可包含字母、数字
JavaScript内容与应用——学习周记7
weixin_54919878的博客
06-20 206
JavaScript内容与应用
学习周记1（html/css）
Estheri的博客
03-09 343
学习笔记 基础知识 定义图像的语法是： <img src="url" alt="some_text"> URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。 <img src="boat.gif" alt="Big Boat"> 在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。 设置宽高度；&
前端学习周记（1）——EC6&JS
Karen_Yu_的博客
05-12 2873
Javascript……唉，之前以为这个已经学完了，才发现，那只是皮毛，连正经代码都未必看得懂
JavaScript学习笔记——算法（一）
追雪球的代码周记
12-11 128
前言 本系列文章主要记录本人在学习JavaScript时的一些重要知识。 整个文章使用了一些简单易懂的文字来书写，主要是便于我自己理解，可能不太规范，如有不理解的建议结合官方解释来理解，这里不再展示，也欢迎指出书写不正确的地方^ ^ 算法 简单理解为实现功能的方法和步骤 1.算法特点 有效性（表达式要有效，如a除以b，b不能是0） 有穷性（步骤是有限的，不是无限循环） 确定性（真/假） 有0到多个输入 有1到多个输出 2.伪代码 对于没有计算机编程基础的初学者，可以在进行算法书写时先写伪代码理清逻辑流
HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
最新发布
weixin_42283461的博客
06-10 1164
HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
学习MybatisX，学习前端HTML CSS JAVASCRIPT语言
07-13
如果你想学习前端的HTML、CSS和JavaScript语言，这是一个很好的选择。HTML用于构建网页的结构，CSS用于样式设计和布局，JavaScript用于实现交互和动态效果。 为了学习这些前端技术，你可以按照以下步骤进行： 1. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值