[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 ...

随机推荐

Java第七次作业--图形用户界面
Deadline: 2017-5-11 23:00 一.学习要点认真看书并查阅相关资料,掌握以下内容: 了解GUI开发的相关原理和技巧熟悉Swint组件的使用理解事件处理模型二.作业要求发布 ...
Word操作（基于word2013）【非编程类】
一.生成目录 1.word支持自动生成目录功能,生成地点为操作时光标的落点 2.生成方式:打开首选项,进入引用标签,如下图所示最左边即为目录选项. 一般有3个内置目录类型 a:手动目录,生成目录后只有 ...
UITableView-（单元格的自定义方法）
//contentView //行内容 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NS ...
pgsql的同步须知
pgsql的同步模式是根据master上的日志来做的同步,有两种同步方式,参考http://www.chinaxing.org/articles/Postgres/2012/12/14/2012-12 ...
bzoj4403 两个串
Description 兔子们在玩两个串的游戏.给定两个字符串S和T,兔子们想知道T在S中出现了几次, 分别在哪些位置出现.注意T中可能有“?”字符,这个字符可以匹配任何字符. Input 两行两个字 ...
PHP向客户端广播信息
在网络中数据传播分为:Unicast(单播) , Multicast(多播或者组播) 和 Broadcast(广播).广播和多播仅应用于UDP,它们对需将报文同时传往多个接收者的应用来说十分重要.而 ...
20190313_C#反转绘制字符串
效果图: 代码: private void button7_Click(object sender, EventArgs e) { Point p = new Point(10,10); Graphi ...
storm架构及原理
storm 架构与原理 1 storm简介 1.1 storm是什么如果只用一句话来描述 storm 是什么的话:分布式 && 实时计算系统.按照作者 Nathan Marz 的说 ...
[Python] numpy.sum
import numpy as np #Syntax: numpy.sum(a, axis=None, dtype=None, out=None, keepdims=<class numpy._ ...
禅道 bug指向为数字问题解决过程
browse.html.php <td <?php if($bug->assignedTo == $this->app->user->account) echo ' ...

[udemy]WebDevelopment_Bootstrap,Templates

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

随机推荐

热门专题