Bootstrap程序媛计划——学习与感想记录

Bootstrap 1

 

 

念:

于自身形容这次博客的时刻,官网已经开了六山头基础课,真的还是非产基础之学科。其实主要是以这次的程序媛计划面向的靶子是14年份以上无丝毫基础的女生(是的就算从未男生)。

课要归因于对话的款型进行教学,其中通过插了有代码练习。

学习之时段几乎每个对话还发出更,还有金刚石,之后也许还会见起竞技场。其实发这篇随笔主要是眷恋记个小笔记,顺便安利一下。

曾经几乎何时,我还以为仿站的从业一经懊恼着,几乎零基础的,被学长要求仿一个网页,靠着百度以及同样照几乎无提啥的题,愣是整治起了个长得还挺像的事物(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]

相关文章