【16.7.4-10】Freecodecamp-Bootstrap响应式设计小结

Use Responsive Design with Bootstrap Fluid ContainersComplete

流行响应式框架-Bootstrap

在html开头加入

<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css”/>

并将所有Html置于<div class=”container-fluid”>下才可应用

Make Images Mobile ResponsiveComplete

图片class=”img-responsive”时可使图片宽度适应页面

Center Text with BootstrapComplete

文字居中:给文字加上class=”text-center”

Create a Bootstrap ButtonComplete

用bootstarp提供的button风格:给Button加上btn class

Create a Block Element Bootstrap ButtonComplete

通过使button变成块级元素使按钮伸展填满水平空间。如果非块级元素的话,元素只会有内容一样宽【也有padding的锅

给button加上btn-block的class

Taste the Bootstrap Button Color RainbowComplete

利用btn-primary的class属性使按钮从灰色变成深蓝色【主要提交按钮】

Call out Optional Actions with Button InfoIncomplete

btn-info  浅蓝色按钮 【可能采取操作】

Warn your Users of a Dangerous ActionIncomplete

btn-danger 红色按钮【删除啊一类的

Use the Bootstrap Grid to Put Elements Side By SideIncomplete

终于用上了Bootstrap的精髓【?】网格布局……

捕获

图片糊的不行,简单说一下就是bootstrap会自动把页面切割成十二等分的竖条,不同元素想要占多少位置只需要写【占了多少等分的竖条】就可以,这样的优点是可以随着页面的大小改变而改变,不会有固定了宽度然后很糟糕的情况发生。

请注意,在这张图表中,class属性 col-md-* 正被使用。在这里,md 表示 medium (中等的),* 代表一个数字,它指定了这个元素所占的列宽。通过此图表的属性设置可知,在中等大小的屏幕上(例如笔记本电脑),元素的列宽被指定了。

在我们创建的 Cat Photo App 中,将会使用 col-xs-*,其中 xs 是 extra small 缩写(应用于较小的屏幕,比如手机屏幕),* 是你需要填写的数字,代表在一行中,各个元素应该占的列宽。

Like, InfoDelete 三个按钮一并放入一个 <div class="row"> 元素中;然后,其中的每一个按钮都需要各自被一个 <div class="col-xs-4"> 元素包裹。

div 元素设置了 class 属性 row 之后,那几个按钮便可嵌入其中。

简单来说,就是大屏幕→md  小屏幕→xs

想要并列的元素都放在一个class=”row”的div中,然后每个元素外面再套一层<div calss=”col-xs/md-?”>   ?即所占的竖条数量。

Ditch Custom CSS for BootstrapIncomplete

bootstrap 自带字体

text-primary 使字变成蓝色

img-responsive使图片适应宽度

Use Spans for Inline ElementsIncomplete

在p标签内用span使特定部分的文字特别标识

Create a Custom HeadingIncomplete

还是十二列

Add Font Awesome Icons to our ButtonsIncomplete

用:<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css”/>往页面中加入Font Awesome图标库

例:用<i class=”fa fa-thumbs-up”>XXX</i>往XXX前面加上一个thumbs up的图标,注意class里面要有fa

Add Font Awesome Icons to all of our ButtonsIncomplete

同理的   fa -trash是一个垃圾桶   fa-info-circle是一个圆形中有i

Responsively Style Radio ButtonsIncomplete

col-xs-X在单选按钮中也可应用

Responsively Style CheckboxesIncomplete

复选也可以

Style Text Inputs as Form ControlsIncomplete

fa-paper-plane纸飞机图标用于提交

Line up Form Elements Responsively with BootstrapIncomplete

依然是十二列的应用

Create a Bootstrap HeadlineIncomplete

House our page within a Bootstrap Container Fluid DivIncomplete

将所有元素放在class=”container-fluid”使页面内容全都是响应式

Create a Bootstrap RowIncomplete

Split your Bootstrap RowIncomplete

Create Bootstrap WellsIncomplete

class=”well”可以使div变得有深度感

Add Elements within your Bootstrap WellsIncomplete

Apply the Default Bootstrap Button StyleIncomplete

按钮:用btn 和btn-default使按钮的图标好看一点

Create a Class to Target with jQuery SelectorsIncomplete

有时候我们加个class不一定为了css,而是jQuery

Add ID Attributes to Bootstrap ElementsIncomplete

Label Bootstrap WellsIncomplete

Give Each Element a Unique IDIncomplete

给每个元素(按钮)一个Id使在jQuery中能定位他们

Label Bootstrap ButtonsIncomplete

Use Comments to Clarify Code

用注释让别人知道你的东西不能动← ←

【16.7.3】Freecodecamp-html5&css小结

Freecodecamp html5&css  课程列表及内容

 

HTML5 and CSS(5 hours)

 

 

·Say Hello to HTML ElementComplete

<h1>的书写

Headline with the h2 ElementComplete

<h2>的书写

Inform with the Paragraph ElementComplete

<p>的加入

Uncomment HTMLComplete

注释:<!–                                                              –>

Comment out HTMLComplete

注释的应用2号机,可消除不想看见但打算保留的东西

Fill in the Blank with Placeholder TextComplete

占位文本,说白了就是毫无卵用只是测试。

Delete HTML ElementsComplete

告诉你你的backspace键要怎么用?【笑

Change the Color of TextComplete

标签内使用style来改变文本颜色

<h2 style=”color:blue”></h2>    注意:没有分号的使用

Use CSS Selectors to Style ElementsComplete

css中<style>的应用

h2{color:blue;}   注意:分号使用

Use a CSS Class to Style an ElementComplete

class在标签中是→<h2 class=””>

在css中用  .XXXX  【别看漏点!

Style Multiple Elements with a CSS ClassComplete

一个class对多个标签

Change the Font Size of an ElementComplete

字号:font-size

Set the Font Family of an ElementComplete

字体:font-family     常见:Sans-serif   Monospace

Import a Google FontComplete

导入外部字体,在代码顶部加入    <link href=”https://fonts.gdgdocs.org/css?family=Lobster” rel=”stylesheet” type=”text/css”>     以应用Lobster字体

Specify How Fonts Should DegradeComplete

字体不可用时的降级:

p {
font-family: Helvetica, Sans-Serif;
}

不可用Helvetica 用Sans-Serif

Add Images to your WebsiteComplete

<img src=”…..”>   自关闭元素Img

Size your ImagesComplete

给img加上class属性 在css中用width设定宽度

Add Borders Around your ElementsComplete

border-color: red;
border-width: 5px;
border-style: solid;【固体

边框的设定

多个class的归属→<img calss=”calss1 class2″>用空格分开

Add Rounded Corners with a Border RadiusComplete

用Border-radius  【边框半径】来使边框变圆角

Make Circular Images with a Border RadiusComplete

50%的border-radius能使图片变成圆的。

Link to External Pages with Anchor ElementsComplete

<a herf=””>balabala</a>

那么balabala就变成了锚点

Nest an Anchor Element within a ParagraphComplete

<a>可以放在<p>里面 一类的。

Make Dead Links using the Hash SymbolComplete

herf=”#”

Turn an Image into a LinkComplete

<a herf=””><img ….></a>可使图片可戳开

Add Alt Text to an Image for AccessibilityComplete

在img中加入alt=””,在图片无法加载时用文字替换

Create a Bulleted Unordered ListComplete

<ul>

<li></li>

<li></li>

</ul>

无序列表

Create an Ordered ListComplete

<ol>

<li></li>

<li></li>

</ol>

Create a Text FieldComplete

<input type=”text”> 自关闭,文本输入框

Add Placeholder Text to a Text FieldComplete

<input type=”text” placeholder=”XXX”>

XXX是文本输入框的默认内容

Create a Form ElementComplete

使用HTML来构建可以跟服务器交互的Web表单(form),通过给你的form元素添加一个动作action来达到此目的。

例如:

<form action="/url-where-you-want-to-submit-form-data"></form>

注意:有关闭标签

Add a Submit Button to a FormComplete

<button type=”submit”>[显示在按钮上的内容]</button>

Use HTML5 to Require a FieldComplete

文本输入必填项:在Input 里加入required

如:<input type=”text” required>

Create a Set of Radio ButtonsComplete

单选按钮:每个单选按钮都应该镶嵌在label里

<label><input type=”radio” name=”A-B”>A</label>

Create a Set of CheckboxesComplete

把上面的radio改成checkbox就变成了多选按钮,以及多个按钮都共享一个name

Check Radio Buttons and Checkboxes by DefaultComplete

默认选中某按钮:在Input 标签内加入checked

Nest Many Elements within a Single Div ElementComplete

Give a Background Color to a Div ElementComplete

<div>的使用以及其在css中的应用

Set the ID of an ElementComplete

Use an ID Attribute to Style an ElementComplete

<id>的应用,CSS中#的对应

Adjusting the Padding of an ElementComplete

padding:内边距

Adjust the Margin of an ElementComplete

Add a Negative Margin to an ElementComplete

margin 外边距   设为负值时可以把父框填满

Add Different Padding to Each Side of an ElementComplete

Add Different Margins to Each Side of an ElementComplete

Use Clockwise Notation to Specify the Padding of an ElementComplete

Use Clockwise Notation to Specify the Margin of an ElementComplete

padding和margin  的距离顺序:上右下左

{padding: px   px   px  px;}

Style the HTML Body ElementComplete

Inherit Styles from the Body ElementComplete

Prioritize One Style Over AnotherComplete

Override Styles in Subsequent CSSComplete

 

Override Class Declarations by Styling ID AttributesComplete

css中:

id>class2>class1>body  (class=”class1 class2″  class2的声明在后面时,在 <style> 部分中 class 声明的顺序却非常重要,第二个声明总是比第一个具有优先权。

Override Class Declarations with Inline StylesComplete

行内样式可以覆盖id,即<h1 style=”color:xx”>

Override All Other Styles by using ImportantComplete

在某css的声明后加上【!important】可以覆盖一切

 

所以是:

!important>行内样式>id>后声明的class>前声明的class>body(全局

Use Hex Code for Specific ColorsComplete

Use Hex Code to Color Elements WhiteComplete

Use Hex Code to Color Elements RedComplete

Use Hex Code to Color Elements GreenComplete

Use Hex Code to Color Elements BlueComplete

Use Hex Code to Mix ColorsComplete

Use Hex Code to Color Elements GrayComplete

Use Hex Code for Specific Shades of GrayComplete

Use Abbreviated Hex CodeComplete

Use RGB values to Color ElementsComplete

Use RGB to Color Elements WhiteComplete

Use RGB to Color Elements RedComplete

Use RGB to Color Elements GreenComplete

Use RGB to Color Elements BlueComplete

Use RGB to Mix Colors

【表示颜色的各种方法。嗯………………………………不用说了。