Bootstrap程序媛安顿——学习及感想记录

Bootstrap 1

 

 

念:

在本人写这一次博客的时候,官网已经开了六门基础课,真的都以非产基础的学科。其实根本是因为这一次的程序媛安顿面向的对象是十四周岁以上没有丝毫基础的女子(是的就算从未男人)。

学科首要以对话的款式进行教学,当中穿插了一些代码练习。

学习的时候大约每种对话都有经验,还有金刚石,之后或然还会开比赛场。其实发那篇小说首如果想记个小笔记,顺便安利一下。

曾几何时,笔者还在为仿站的事而相当慢着,大致零基础的,被学长要求仿三个网页,靠着百度以及一本差不离没讲啥的书,愣是整出了个长得还挺像的东西(x),当然,棘手的题材可能没有消除。以前学到的Bootstrap课程,斌叔教了轮播图的底子,瞅着格外特效笔者愣了很久,才反应过来,那不便是自个儿前边棘手难题中的贰个啊?!!!这弹指间有种捡到宝的错觉哈哈哈!

在念上也关心了部分前端工程师,dalao们每一遍蹦出来的词汇都让自个儿那些小渣一脸懵逼,百度了也没看懂他们说的是啥…然后看见斌叔开的课…噫之后的课感觉是挺难啃的了,咩继续开足马力吗(抖

——2017.07.15

 

尔后自身在iMooc网上学了Python入门课程,最近正值学进阶课程,但是瞅着有个别不会,学习进程不快。程序媛铺排新开的比赛场完美通过,C语言的教程也完美通过,很心潮澎湃。在论坛中找到了小仙女们聚集的群号,加进去后看见了一群可爱的人。第二个早晨就聊了很久,学习的主旋律,职业发展,面试标题等。因为群里还有在职的程序媛,收获十分的大。日常里小仙女们也会将协调蒙受的难题发出来,群内的分子们也会耐心解答,大家一起谈谈,实验各类格局,挺好的,相处得很和气哈哈。

——2017.07.25

 

如故没有新科目,未来一边境海关怀斌叔的博客园一边学习基础算法(望天),后南平旧没有新课程…

——2017.08.06


 

学学课程中的笔记

*有荒唐的地点还请大佬们提出,相当感谢。

 

HTML

<hr/>  分割线(单身狗)
字体样式
<i>  斜体字
<b>  粗体字
<u>  下划线
src  值为图像文件的URL
列表
<ul>  无需列表
<li>  列表中每行的内容
<ol>  有序列表

<div>:可定义为文档中的分区或节,把文档分割为独立的、不同的部分。

<table border='1'><!--table表表格,border表示边框粗细--> 
<tr><!--表元素行--> 
<td>第一行第一列</td> 
<td>第一行第二列</td> 
</tr>
<tr> 
<td>第二行第一列</td> 
<td>第二行第二列</td> 
</tr>
</table> 

<video width:"200" height="200" src="视频地址" controls></video><!--controls设置底部控制条--> 
<a href="地址"></a>

 

CSS

px:网页中的长度单位,类似于“千米”。
margin:设置外边距。
margin-top:上边距。
margin:0 auto;  上下边距为零,左右根据浏览器边框自动设置,也就是居中。
padding: 10px 10px 10px 10px;  上右下左,内边距。
text-align:规定元素中的文本的水平对齐方式。
<p>的style设置float可以变为一行。
position:absolute;  绝对定位。

 

JavaScript

 1 alert('Hello World!');  提示框显示“Hello World!”。
 2 alert(1+1);  提示框显示“2”。
 3 var i;  声明 i。
 4 var i=1;  定义 i。之后 alert(i);  显示“1”。
 5 
 6 var s; s="hello"; var b="world";
 7 var c=s+b; alert(c);  
 8 字符串可相加,结果串在一起,提示框显示“helloworld”。
 9 
10 通过 DOM(Document Object Model) - 文档对象模型,使HTML和JavaScript紧密地联系在一起,也称作DOM树。
11 
12 1、HTML中
13 <div>
14     <p id="p1">Year.</p>
15 
16 2、JS中
17 var p1=document.getElementById("p1");
18 p1.innerHTML;  //表p1的内容
19 
20 p1.innerHTML='THIS IS A BOOM!!!';  在JS中改变p1的内容。
21 
22 function Hello(){ ... }
23 Hello(); //调用函数
24 
25 function ola(content){
26     alert(content);
27 }
28 ola(100);  //提示框显示“100”
29 
30 element.onevent=function;
31 例: 
32 var b1=document.getElementById("b1");
33 bi.onclick=bclick;
34 function bclick(){
35     alert('我被点击了!");
36 }
37 通过id获取buttom这个元素:
38 onclick为点击事件,后调用bclick这个函数,弹出“我被点击了!”;
39 onmouseover  鼠标移动到元素;
40 onmouseup  鼠标按键被松开。
41 
42 textarea:定义一个多行的文本输入控件。

 

jQuery

console.log();  向web控制台输出一条信息。
$:document.getElementById,是在获取HTML元素。
例:
$('#id');
$('#id').append(html);  选择 id 代表的元素插入html,append代表要插入 HTML。

AJAX:与服务器交换,在不重新载入整个页面的情况下更新网页的一部分。

 

Bootstrap

Bootstrap为一整套前端UI框架,使网页在不同尺寸的屏幕上正常显示。

网格(Grid):网页设计中的网格用于组成内容,让网站易于浏览,并降低用户端的负载。
行(row):必须放在 .container class 内,一个 row 代表一行,一行分为12列。
列(col):col-xx-y 中的 y 代表当前元素所占列数。
xx 的值可为四种(分别代表在四种尺寸宽度下的布局样式):lg(lg>=1200px)、md(md>=992px)、sm(sm>=768px)、xs(xs<768px)。
col-lg-offset-2:偏移量,在lg的布局下,当前标签加上对于列数的左外边距(margin-left)。

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

glyphicon/glyphicon-user:图标样式(Bootstrap官网上有更所内容)

 

[TBC]

相关文章