[udemy]WebDevelopment_Bootstrap,Templates

Bootstrap Introduction

Bootstrap 相对于CSS, JS

就像PPT模板相对于PPT

说白了就是前人已经做好了(pre-build)很多模板，你可以直接拿来主义

Bootstarp 4

Two ways to use it

1. download

you will see a bunch of files

Bootstarp.min.css means they are minified

2. CDN(Content Delivery Network)

we can directly copy this code into index.html

Because JS would be read after CSS, it be put in the bottom of body part

 <!DOCTYPE html>

 <html>

 <head>

     <title>Bootstrap</title>

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

 </head>

 <body>

     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

 </body>

 </html>

next step,

if we would like to add Navbar in our website

copy the code into your html file directly

 <!DOCTYPE html>

 <html>

 <head>

     <title>Bootstrap</title>

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

 </head>

 <body>

 <nav class="navbar navbar-expand-lg navbar-light bg-light">

   <a class="navbar-brand" href="#">Navbar</a>

   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

     <span class="navbar-toggler-icon"></span>

   </button>

   <div class="collapse navbar-collapse" id="navbarSupportedContent">

     <ul class="navbar-nav mr-auto">

       <li class="nav-item active">

         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

       </li>

       <li class="nav-item">

         <a class="nav-link" href="#">Link</a>

       </li>

       <li class="nav-item dropdown">

         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

           Dropdown

         </a>

         <div class="dropdown-menu" aria-labelledby="navbarDropdown">

           <a class="dropdown-item" href="#">Action</a>

           <a class="dropdown-item" href="#">Another action</a>

           <div class="dropdown-divider"></div>

           <a class="dropdown-item" href="#">Something else here</a>

         </div>

       </li>

       <li class="nav-item">

         <a class="nav-link disabled" href="#">Disabled</a>

       </li>

     </ul>

     <form class="form-inline my-2 my-lg-0">

       <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

       <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

     </form>

   </div>

 </nav>

     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

 </body>

 </html>

Then beautiful Navbar is shown

Use the same step,

we can add Jumbotron ['dʒʌmbəutrɔn] n. 电视机的超大屏幕

and modal

You may notice that when we click the button

we have our own modal, which proves this is JS

How can we add our own custom look ?

For example, I would like to change Launch demo modal button's color

We can search buttons code, and edit the Launch demo modal's button code

Or we can change it in the style.css file

.btn-success{

    background-color: orange;

}

Bootstrap 4 Grid

This is the reason why bootstrap is so popular.

Boootstrap allowed us to create very responsive website using these ideas of columns

   <div class="container">

     <div class="row">

         <div class="col col-sm-6" >

           1 of 2

         </div>

         <div class="col col-sm-3" >

           2 of 2

         </div>

          </div>

   </div>

.col{

    background-color: grey;

    border: 2px solid black;

}

The web site would be shown like this,

Bootstrap has the idea of a grid system and this grid system has 12 lines

col-sm-6 : 1 of 2 part covers 6/12

col-sm-3 : 2 of 2 part covers 3/12

   <div class="container">

     <div class="row">

         <div class="col col-sm-6" >

           1 of 2

         </div>

         <div class="col col-sm-3" >

           2 of 2

         </div>

         <div class="col col-sm-3" >

           Extra

         </div>

          </div>

   </div>

The web site would be shown like this,

But what if the sum of these three is over 12 ?

  <div class="container">

     <div class="row">

         <div class="col col-sm-6" >

           1 of 2

         </div>

         <div class="col col-sm-3" >

           2 of 2

         </div>

         <div class="col col-sm-4" >

           Extra

         </div>

          </div>

   </div>

The web site would be shown like this,

   <div class="container">

     <div class="row">

         <div class="col col-sm-6 col-md-12 col-lg-12" >

           1 of 2

         </div>

         <div class="col col-sm-3 col-md-6 col-lg-12" >

           2 of 2

         </div>

         <div class="col col-sm-4 col-md-6 col-lg-12" >

           Extra

         </div>

          </div>

   </div>

If the size of the window is medium then I want the whole 12 grid system to the first div, 6/12 gird to the second, 6/12 to the third.

Same logic as col-lg-12.

This is how you can create really responsive websites. And the biggest selling feature of bootstrap is that it make sure our website look good no matter what screen size.

Putting Your Website Online

github.io

DEVELOPER FUNDAMENTALS:IV

Try to use free templates:

Animate.css (https://daneden.github.io/animate.css/)

So it is very rare when build something from scratch

Create-tim(https://www.creative-tim.com/)

有已经搭好的web模板

[udemy]WebDevelopment_Bootstrap,Templates的更多相关文章

解决Windows版Git出现templates not found的问题
环境: Win10 x64 Git windows客户端(下载自 https://git-scm.com/) SourceTree 1.9.6.1(使用系统安装的Git,而非SourceTree内嵌的 ...
[c++] Templates
Template是编译时多态.所有的模板都是在编译时产生对应的代码,它没有面向对象中的虚表,无法实现动态多态. Function Template A function template is a p ...
webstrom live templates
javascript: 在live templates底部要选择javascript # $('#$END$') $ $($end$) $bd $(document.body) $d $(docume ...
Myeclipse Templates详解(一) —— Java模板基础
目录 Templates简介 MyEclipse自带Templates详解新建Template 自定义Template 因为自己比较懒,尤其是对敲重复代码比较厌恶,所以经常喜欢用快捷键和模板,Mye ...
Using FreeMarker templates (FTL)- Tutorial
Lars Vogel, (c) 2012, 2016 vogella GmbHVersion 1.4,06.10.2016 Table of Contents 1. Introduction to F ...
juqery模板 Templates
现在已经有了许多JavaScript的解决方案模板,从这方面说,标准化的模板解决方案必然是大势所趋.在本节中,我们向你简要描述四个最流行最有趣的模板.现有的模板解决方案能解决什么?那些特色在jQuer ...
django TEMPLATES
?: (1_8.W001) The standalone TEMPLATE_* settings were deprecated in Django 1.8 and the TEMPLATES dic ...
django复习笔记3:urls/views/templates三板斧
0.先看看文件结构 mysite/ mysite/ ├── __pycache__ │ └── manage.cpython-.pyc ├── blog │ ├── __init__.py │ ...
Effective C++ -----条款44：将与参数无关的代码抽离templates
Templates生成多个classes和多个函数,所以任何template代码都不该与某个造成膨胀的template参数产生相依关系. 因非类型模板参数(non-type template para ...

随机推荐

WebGL编程指南案例解析之绘制四边形
//案例4,绘制矩形,和三角形类似,但是注意因为一个矩形有4个顶点,按照两个三角形绘制矩形的话,顶点顺序要注意 var vShader = ` attribute vec4 a_Position; v ...
Maven的安装学习笔记
安装 1.下载安装包:http://maven.apache.org/download.cgi 2.检查JDK是否安装,没有安装,先安装JDK cmd中输入:java -version 3.解压后配置 ...
linux screen 命令详解(转载)
转载于:http://www.cnblogs.com/mchina/archive/2013/01/30/2880680.html 一.背景系统管理员经常需要SSH 或者telent 远程登录到Li ...
6-19 Count Connected Components（20 分）
Write a function to count the number of connected components in a given graph. Format of functions: ...
[CF1016G]Appropriate Team
codeforces description 给你一个数组$\{a_i\}$以及$X,Y$,问你有多少对$(i,j)$满足存在一个$v\in \mathbb{N}^+$使得 \(\gc ...
ES6必知必会（六）—— Class
1.在之前的JS面向对象编程中,如果定义一个构造函数,一般来说是这样: function Person( name , age ) { this.name = name; this.age = age ...
转-JAVA webservice之CXF 范例--http://cxshun.iteye.com/blog/1275408
JAVA webservice之CXF 博客分类: j2ee相关昨天我们一起学习了一下xfire,今天我们来看一下CXF,为什么学完那个接着学这个呢.因为CXF是在xfire的基础上实现的,所以我 ...
cratedb geo 查询
cratedb支持的geo 查询还相对比较全,开发基本的功能已经够用了安装cratedb 使用docker docker run -d -p 4200:4200 crate 创建数据库创建表 CR ...
在IE7+ 中弹出窗口并关闭本身窗口的脚本（备忘）
window.onload =function(){ window.open("http://www.126.com"); window.opener=null; window.o ...
Linux配置Nginx＋Tomcat负载均衡
cd /usr/local/tomcat1/webapps/ROOT/ tar -zxvf nginx-1.14.2.tar.gz -C /usr/local 一.Linux配置Nginx 一.下载N ...

[udemy]WebDevelopment_Bootstrap,Templates

[udemy]WebDevelopment_Bootstrap,Templates的更多相关文章

随机推荐

热门专题