全栈老司机roadmap笔记--------Bootstrap (level 1)

level 1

framework defination：

bootstrap file structure:

Adding bootstrp to our html:

bootstrap relays on jquery, so we also need to add jquery inside out page

The container class

the container-fluid class

practice code:

<!DOCTYPE html>
<html>
  <head>
    <title>Blasting Off With Bootstrap</title>
    <link href=‘css/main.css‘ rel=‘stylesheet‘>
    <link href=‘css/bootstrap.min.css‘ rel = ‘stylesheet‘>
  </head>
  <body>
    <div class=‘container‘>
      <h1>The Fastest Way to Space</h1>
      <p>Make your way to space in the comfort of your own rocket, elevator or transporter.</p>
      <button type=‘button‘>Take the Tour</button>
      <button type=‘button‘>Book Tickets Now</button>
    </div>

    <p>This is our footer</p>
     <script src =‘//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js‘></script>
     <script src =‘js/bootstrap.min.js‘></script>

  </body>
</html>

时间： 2024-08-06 07:56:38

全栈老司机roadmap笔记--------Bootstrap (level 1)的相关文章

全栈老司机roadmap笔记--------Bootstrap (level 3)

level3 Typography: How can we use bootstraps to make our lead text stand out more? .lead class centering text: using the .text-* in bootstrap front we have a image library using icon the icon looks so small, as bootstrap set font to 14, we need to o

全栈老司机roadmap笔记--------Bootstrap (level 2)

level2 responsive design rows: columns: we can use multiple columns: we can use .col-md-* we can do something like this Adding row, make code easier to read popular blogs with siding bar leave one column as padding Empty column much better way to lea

全栈老司机roadmap笔记--------(3)angular js

level 3 Forms and Models 如何添加和显示review? review内容作为product的内容的一部分!放在app.js文件里面在html显示页面里面,增加一个循环来显示review的内容我们如何把表单要填写的内容和我们要显示的内容进行绑定呢? 通过ng-model directive!!! 另外2个two-way binding example, radio button和check box 练习code 1 <!DOCTYPE html> 2 <html

全栈老司机roadmap笔记

目录: 1. javascript part1 2. Angular js part1 part2 part3 //to do 3. bootstrap part1 part2 part3

全栈老司机roadmap笔记--------(4)angular js

level4 当我们需要打印多次product name 和product price的时候,我们要重复利用这2行代码如果要传入string,那么用“” 里面包含‘’.利用ng-include 加载页面以后,用ajax call来拿到需要include的page ---------------------------分割线----------------------------- a better way to include html template is to create custom

全栈老司机roadmap笔记--------(1) javascript

javascript 1. 转义字符 \\ 打印出来是\ \n 打印出来是回车 2. 比较string时候可以用＝＝不像java比较的是2个指针了哈哈 "A" == "B" 3. 变量定义及赋值 //to do -----------------------------------------------------------

<python全栈开发基础>学习过程笔记【16d】装饰器(含time模块)

1.如何计算一个函数运行的时间 import time #导入time模块 start=time.time() #返回从unix诞生到现在为止的时间,单位是秒 print(start) def haha(): print("希望你开心") end=time.time() print(end) print(end-start) 输出: ==================== RESTART: C:/Users/dell1/Desktop/1.py ===================

<python全栈开发基础>学习过程笔记【6d】列表，字典，元组，知识点复习

<python全栈开发基础>学习过程笔记【17d】生成器

1.列表生成式 >>> [i**2 for i in range(10)] [0, 1, 4, 9, 16, 25, 36, 49, 64, 81] 这个过程是从range(10)列表中依次取元素,计算元素的平方,再放到另一个列表中 2.可以把[1]中的代码写成这种形式 >>> def f(x): return x**2 >>> [f(i) for i in range(10)] [0, 1, 4, 9, 16, 25, 36, 49, 64, 81]